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Preface 


This book is an introduction to the programming of graphics on 
microcomputers. To ensure an introductory treatment, I have 
stopped each of the main chapters at a point where some mathe- 
matical knowledge beyond that picked up by most people at 
school begins to become necessary. Some mathematical know- 
ledge and sophistication become necessary, particularly in the 
field of geometry, to program advanced graphic effects, but I 
hope that one of the things this book shows is that a good deal 
of graphics programming can be done using a minimum of mathe- 
matics. 

I have tried deliberately to keep all the graphics programs in 
this book as short as is consistent with showing how a particular 
aspect of graphics is programmed. It seemed to me important 
that the programs should show clearly how graphics effects are 
achieved. Consequently the programs are uncluttered by the 
programming needed for such things as making data entry fool- 
proof and ensuring that the program can never do anything that 
is ‘unsafe’. I am confident that the reader can deal with these 
aspects of the programming. 

For my money the graphics capability of a microcomputer is 
usually its most attractive feature. Most of the early programs 
for microcomputers were written by programmers who had not 
grasped that good graphics facilities were available to them. This 
situation has improved considerably, but there is still some way 
to go before the full potential of microcomputer graphics is 
capitalised on by most programs. The graphics effects produced 
by mainframe computers for purposes such as the displays in 
Flight Simulators are somewhat in advance of what can be 
achieved with microcomputers, not only because of the super- 
iority of the hardware but also because of superior software 
support and programming expertise. This should be seen as a 
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challenge to the users of personal computers rather than anything 
else, providing a stimulus for the development of better graphics 
applications programs and graphics support programs. 

The problem of how much mathematics is needed in order to 
program graphics effects can be a worrying one for some people. 
If it is accepted that very little is necessary to get started, the 
desire to progress to the creation of more advanced effects should 
be sufficient to motivate the mastery of the necessary theory. In 
producing three-dimensional effects, it is the visualisation of the 
three-dimensional situation that is as difficult as anything for 
most of us. This is typical of many other applications in my 
experience, in that it is not necessarily the mathematics that 
presents the major obstacle. 

I have contributed a graphics column to the magazine Computer 
and Video Games since its inception, and a few sections in this 
book are based more or less loosely on ideas first explored there. 
The Appendix is based on an article published in a copy of the 
magazine Personal Software devoted to graphics. The system used 
to classify the graphics capabilities of microcomputers was origin- 
ally devised by that magazine’s editor, Henry Budgett, although I 
have modified it very slightly. I gratefully acknowledge his contri- 
bution, and thank him for permission to use the material. 

I have been very fortunate in that many different types of 
microcomputer are available at my place of work. The Polytechnic 
of North London has microcomputers not only in its departments, 
but also in its Community Computer Centre to which I have had 
ready access. The Hewlett-Packard graph plotter on which many 
of the illustrations in this book were plotted belongs to the 
Polytechnic’s Computing Service. I am grateful to all the people in 
the Computing Service and in the Community Computing Centre 
at The Polytechnic of North London for their friendly help and 
cooperation. 

Finally, I should like to thank my wife Anne who, at a diffi- 
cult time for her, has been her usual helpful self at all stages of 
producing this book. 


Chapter One 
Introduction to 
Graphics Programming 





The graphic arts are drawing, painting and engraving. The word 
‘graphics’ when used outside the computer field refers to such 
things as drawings and engravings. These can be engineering 
drawings or an engraving made for a poster design but, by impli- 
cation, graphics are always carefully designed for the purpose of 
pictorial communication. Computer graphics is essentially the 
creation and display of pictures using a computer. 

The graphics capabilities of microcomputers are among their 
most immediately appealing features. Whether a particular micro 
can generate colour displays, whether it can display realistic and 
accurate representations of objects, and whether convincing 
animated effects can be produced are all likely to interest the 
potential purchaser and the user of a micro. If a micro can give 
these effects, and others, then they can be used in the programs 
that are run on it, or the user can generate them himself for his 
Own purposes. 

The user’s interest may be in games, business applications or 
educational usage but, whatever his field of interest, graphics can 
be an invaluable aid. Lively and interesting images will enhance 
the entertainment value and the lasting attraction of any game, 
as is well illustrated by the arcade game Space Invaders. Business 
information can be much more readily understood if it is pre- 
sented pictorially, rather than numerically, by using charts, 
histograms and other suitable means. Educational programs are 
much more likely to hold the user’s attention, and therefore 
fulfil their educational aims, if they employ attractive and inter- 
esting graphics. In fact, the use of graphics is one way in which a 
microcomputer can come into its own as a useful and distinctive 
item, Occupying its own individual niche. After all, books are a 
good medium for education and for information transfer, but if a 
computer is to be used for the same purposes it needs to show 
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2D, 





Fig. 1.7. Display produced by line graphics system. 


some advantages over a book. By using imaginative graphics effects 
to maintain interest and to motivate further usage, a micro can 
show a very real advantage. 

Computer graphics itself is by no means new. Mainframe 
computers have been used for graphics since the 1950’s, and 
subsequently minicomputers have also been used. However, with 
a mainframe computer an expensive special-purpose graphics 
device has to be attached to the already expensive mainframe 
computer in order to make graphics possible. The beauty of a 
microcomputer is that its graphics capability is inbuilt, and besides 
this it is available at a price that many people can afford. This has 
led to a ready accessibility to graphics for large numbers of micro 
users. By contrast, mainframe graphics is available to only a rela- 
tively small elite corps. This is not only because the expense of 
large computers and their consequent siting in such places as 
research laboratories and universities, precludes access for most 
people, but also because they demand a high level of expertise. 
The second great bonus of microcomputer graphics is that graphic 
effects are not difficult to achieve, so that with a small amount 
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Fig. 1.2. Display produced by line graphics system. 


of programming expertise the user can generate his own graphic 
displays at will. 

Graphics are readily available on microcomputers because 
they make use of television technology for generating displays. 
This, fortunately enough, is the technology now used for pro- 
ducing displays in mainframe computer graphics after an evolu- 
tion involving several other display techniques. Consequently, 
micros can draw on the expertise developed in mainframe com- 
puter graphics. Because micros cost far less, the graphic displays 
that they can produce cannot compete with those of the more 
expensive of the current mainframe computers, nor would one 
expect them to. However, the displays that can be generated 
using micros such as the BBC Microcomputer and the Atari 
approach what was available on mainframe computers only a 
short while ago. Detailed displays that are typical of what can be 
produced by these micros are illustrated in Figures 1.1 and 1.2. . 
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The graphics facilities of micros 


The graphics facilities possessed by micros vary considerably, but 
they can be classified broadly into three groups which we shall 
refer to as block graphics, pixel graphics and line graphics. All 
micros provide a rectangular array of dots on their screens, and 
their graphic displays are generated by brightening some dots and 
leaving others dark or, as another way of saying the same thing, 
by turning some dots on and others off. (This assumes a mono- 
chrome display and ignores the complexities of colour, but the 
principle there is fundamentally the same). The essential differ- 
ence between the three types of graphics facilities lies in the size 
of the smallest group of dots to which the programmer has immed- 
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Fig. 1.3. Some common block graphics characters. 


Block graphics is the term we are reserving for the graphics 
capability possessed by machines such as the Commodore PET. 
Besides being able to type letters and numbers on these machines 
it is also possible to type, in exactly the same way, any of a 
number of so-called graphics characters. Thus, with a block 
graphics system it is possible to type out a picture in much the 
same way as one would type out a paragraph of text. Clearly 
the capabilities of such a system are limited by the graphics 
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Fig. 1.4. A block graphics display. 


characters that are provided. It may seem a rather primitive way 
to create graphics effects but, given a carefully designed set of 
graphics characters and some ingenuity in their manipulation, 
it is possible to create realistic and remarkably detailed images. 
Figure 1.3 shows a set of graphics characters which is a sub-set 
of those possessed by all the micros having block graphics 
capability, and Figure 1.4 illustrates a display generated with their 
use. As far as our classification is concerned, the essential point is 
that with a block graphics system the smallest group of dots 
which the programmer can access is the character-sized group 
which on the PET, for instance, is a rectangular array of 8 by 
8 dots. 

Micros with line graphics facilities have in a sense the most 
sophisticated graphics facility offerred by micros. The Apple and 
Atari machines are among those possessing this capability. Such 
micros contain in their BASICs commands such as MOVE and 
DRAW (although PLOT figures largely as well) with which a draw- 
ing head can be moved around the display screen and a line can 
be drawn from the current position to a specified position. With 
this capability highly sophisticated images such as the one 
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illustrated by Figure 1.1 can be drawn. It is possible to achieve 
fine detail in the images because every dot on the screen is acces- 
sible to the programmer. 





Fig. 1.5. A pixel graphics display. 


- EE 


Fig. 1.6. Some pixel graphics characters. 


Pixel graphics systems are in a way intermediate between the 
other two, and a typical display produced by a machine incorpor- 
ating this system — in fact a Tandy TRS-80 — is given in Figure 
1.5. A pixel graphics system is still essentially character-based, 
but it contains a special set of graphics characters in which the 
character is divided into a number of equal parts, typically into 
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six. Some of these characters are illustrated in Figure 1.6. By 
using the appropriate special character, the programmer can 
effectively access a group of dots one-sixth the size of the group 
used for a character. In this way it is possible to access a smaller 
group of dots than it is in a block graphics system while the 
individual dots on the screen can still not be accessed. 


Resolution 


The idea of resolution can be explained in terms of the various 
graphics systems in use. Resolution essentially refers to the 
amount of detail that can be obtained in displayed images. The 
resolution is governed ultimately by the number of dots pro- 
vided by the system for constructing the displayed images. Since 
all the dots are individually accessible in a line graphics system we 
can say that the resolution of such a system is the same as the size 
of the array of dots provided. Thus since the largest array of dots 
provided for graphics by the Apple is 192 rows each of 280 dots, 
we can say that its highest resolution is 280 by 192. (We write the 
numbers in this order because we choose to write the number of 
dots along a horizontal line before the number of dots on a 
vertical line). To give another example, the highest resolution of 
the Atari machines is 320 X 192 because the largest array of dots 
that they provide consists of 192 rows each with 320 dots. 
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Fig. 1.7. (a) Pattern of dots for the letter A. (b) Pattern of dots for a block 
graphics character. 


In a block graphics system, as we have seen, it is not possible to 
access the individual dots on the screen, but only to access a 
character position which is assigned a rectangular block of dots. 
Thus, when an ‘A’ is typed the pattern of dots shown in Figure 
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1.7(a) is produced while Figure 1.7(b) shows the result of typing 
a typical graphics character. The screen of the PET, to give an 
example, contains 25 rows each of which can hold 40 characters, 
so the resolution might be said to be 40 X 25. Since each character 
is assigned an 8 by 8 block of dots, the actual composition of the 
screen is 200 rows each with 320 dots. In this way the potential 
resolution of the screen is 320 X 200. It is characteristic of a block 
graphics system that its potential resolution is considerably greater 
than the actual resolution available to the programmer. 

A pixel graphics system can exceed the resolution of a compar- 
able block graphics system because of its special pixel graphics 
characters. To give an example again, the screen of the Tandy 
TRS-80 consists of 16 lines each with 64 character positions, but 
its special graphics characters permit each character position to 
be subdivided into three rows and two columns. In this way the 
actual resolution available is 2 X 64 by 3 X 16 or 128 X 48. 
Again, this is less than the potential resolution, but it is a good 
deal closer to it than that of the equivalent block graphics system. 

The terms high-resolution graphics and low-resolution graphics 
are frequently used in the context of microcomputer graphics. 
A system capable of consistently generating highly detailed images 
can be said to be capable of high-resolution graphics. Although it 
is a matter of judgement, a resolution of at least 256 X 192 can 
be suggested as necessary for generating high-resolution graphics. 
On this basis most line graphics systems are capable of producing 
high-resolution graphics while pixel and block graphics systems 
generate low-resolution graphics. 


Lack of standardisation 


It is probably clear to the reader already that there is an almost 
total lack of standardisation in the way that graphics facilities 
are provided by micros. Should anyone doubt this, they need only 
consult the information presented in Appendix 1 about the 
graphics capabilities of various micros. Even the simple classifica- 
tion of the previous section is defied by some systems which can 
possess, for example, both line and block graphics. But all the 
micros that do conform to a particular classification will show 
wide variations. Items that can differ include the following: 


(a) the number of dots per row, 
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(b) the number of dots per column, 

(c) the number of character positions per row, 

(d) the number of rows of characters, 

(e) the order in which the rows are numbered (from top to 
bottom or bottom to top), 

(f) the size of the block of dots assigned to a character, and 

(g) the way in which a character position is divided into pixels. 


Because of this variety, it is not at all easy to give a general 
treatment of microcomputer graphics. The classification of 
systems into line, pixel or block is designed to simplify the task 
somewhat. However, there are some underlying principles which 
govern the generation of graphic displays, and this book aims to 
present them in such a way as not only to make them clear but 
also to show how they can be implemented and used on any type 
of microcomputer. 


Summary 


All microcomputers use a television screen as their display screen, 
employing either that of a television set or one of their own. For 
creating images the microcomputer provides a rectangular array 
of dots on the display screen, and a particular image is created by 
brightening some of these dots and leaving others dark. The 
graphics facilities of microcomputers can be classified by the way 
in which the user is given access to the dots. If the system only 
permits access to the block of dots used to display a character 
it is called a block graphics system. When sub-divisions of the 
block assigned to a character can be accessed individually the 
system is referred to as a pixel graphics system. Finally, a system 
which permits independent access to each dot is known as a line 
graphics system. The degree of graininess evident in the displayed 
images tends to decrease from block graphics to pixel graphics 
to line graphics. 

Some microcomputers defy this classification scheme and, 
indeed, there is an almost total lack of standardisation in the 
way that graphics facilities are provided by microcomputers. 
However, the classification scheme is a great help in trying to 
understand how the principles of computer graphics apply to 
microcomputers. 


Chapter Two 
The Production of 
Graphic Displays 





Microcomputers produce their displays using television tech- 
nology. They are either connected to a television set which pro- 
duces the display or they have their own built-in television screen. 
For this reason a microcomputer has to be able to generate tele- 
vision signals to drive its display. A television picture is composed 
of lines, and a television signal contains special pulses to mark 
the part of the signal that corresponds to a line. It also has marker 
pulses to identify the group of lines that makes up a picture. 
Figure 2.1(a) shows how a tv picture is composed of lines, Figure 
2.1(b) shows the part of a tv signal corresponding to one line, and 
Figure 2.1(c) shows the part of a signal corresponding to a picture. 

As we have seen, a microcomputer display is composed of dots 
in the way illustrated in Figure 2.2(a). The dots along a par- 
ticular line of the picture are produced by placing pulses as is 
appropriate in the part of the tv signal that corresponds to that 
line of the picture. The presence of a pulse in the signal will cause 
a dot to be turned on while the absence of a pulse will cause it 
to be off. Figure 2.2(b) shows a part of a tv signal produced by 
a micro to give a line of dots on the screen. 

Now, when a television set is showing a programme, the tv 
signal is continuously transmitted to it so that the set needs no 
memory because the picture is being continuously refreshed. When 
a micro is producing its tv signal it must also produce the signal 
continuously, and for this reason it must be able to store the 
image that is to be displayed in some way. A portion of the 
memory of a micro is set aside for this purpose. Since the display 
is going to be changed fairly often, the read-write memory or 
random access memory (RAM) of the micro must be used to hold 
the image for display on the screen, and consequently the area of 
memory used for this purpose is known as the screen RAM or 
video RAM. 
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Fig. 2.1. (a) Scanning pattern for a tv picture. (6) Part of tv signal correspond- 
ing to one line. (c) Part of tv signal corresponding to a picture. 
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Fig. 2.2. (a) Pattern of dots making a picture. (b) Tv signal to turn on two 
dots on a line. 


This type of graphics where the image to be displayed is stored 
in memory is known as memory mapped graphics. The way in 
which the screen display is stored in memory varies from com- 
puter to computer, but the way in which it is stored on a par- 
ticular machine is called its screen memory map. 
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It is worth mentioning at this point that some micros can drive 
a tv monitor, as well as a standard tv set, and that when this is 
possible the quality of the display given by a monitor is invariably 
superior, being much crisper and clearer. The reason for this is 
that a monitor can directly accept the video signal that is initially 
produced by a micro whereas a tv set is made to be able to accept 
a radio-frequency signal that is broadcast to it. So, when a micro 
is used with a tv set, its video signal must be made to modulate a 
radio-frequency carrier to produce a signal similar to a broadcast 
tv signal, which is suitable for a tv set. The tv set immediately 
demodulates this signal to produce the video signal it needs to 
drive its display. The two operations of modulation and demodu- 
lation, which are not necessary when a monitor is used, inevitably 
degrade the signal to some extent and result in a poorer quality 
picture than can be obtained with a monitor. The fact is, of 
course, that most people have a television set in their home, 
whereas not too many possess a monitor. 


Variety 


Before going on to examine the relationships between the ways in 
which an image is stored and then displayed, it is useful to con- 
sider the way in which a variety of items can be represented 
because, although we speak of an image being stored in the 
memory of a micro, it is important to bear in mind that what is 
stored is a representation of the image and not the image itself. 
An understanding of the way in which items, such as patterns of 
dots and their colours, are represented in a computer is essential 
if we are to be able to control the images that it produces. 


Fig. 2.3. A two-state device. 
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First, it is obvious that a device which can take on either of 
two different states can be used to represent two different things. 
These two things can be the binary numbers 0 and 1, the states 
‘off’ and ‘on’, the colours black and white or any other pair we 
might like to choose. Familiar examples of two-state devices are a 
light switch which signifies by being up or down whether a light 
is on or off (it also controls the state of the light, of course) and 
the arrangement illustrated in Figure 2.3 which shows whether 


a room is vacant or engaged. 
BIT2 + BIT1 SWITCH2 SWITCH' 


0 
0 
1 
1 





0 
1 
1 
0 





Fig. 2.4. A pair of two-state devices can assume four states. 


A computer memory consists of a collection of two-state 
elements, usually elements that can be magnetised in either one 
of two directions, so that each element can represent one of 
two items. An element is usually referred to as a bit, although 
somewhat confusingly a bit can also refer to what is represented 
by, or stored in, an element. The term Dit is a contraction of the 
words binary digit, and the binary digits are written as O and 1. 
Now if we have two two-state devices we can represent a variety 
of items, four in fact, because as is shown by Figure 2.4 a pair of 
two-state devices can take on four different states. If we have 
three two-state devices then this assemblage can take on eight 
different states, as shown in Figure 2.5 and so it could be used 
to represent eight different things, such as eight colours as shown 
in the figure. 

Examination of Figures 2.4 and 2.5 shows that by adding the 
third two-state device to an existing pair, the variety of items that 
can be represented is doubled. The variety of states that the pair 
of two-state devices can achieve is retained, but is increased by 
adding to them the third device first in one of its possible states 
and then in the other. Thus, with each extra two-state device that 
is added, the variety of items that can be represented is doubled as 
recorded by the following table. 
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WHITE 
RED 


ORANGE 


YELLOW 
GREEN 
BLUE 
VIOLET 
BLACK 





Fig. 2.5. Three two-state devices can assume eight states and represent eight 
items. 


With | bit we can represent 2 items. 

With 2 bits we can represent 2 X 2 = 27 = 4 items. 
With 3 bits we can represent 2 X 27 = 2° = 8 items. 
With 4 bits we can represent 2 X 2° = 2* = 16 items. 
and so on. 


Microcomputer memories are organised into groups of eight 
bits, referred to as bytes. The contents of a byte can be any of 
2° = 256 different possibilities and so can represent any of 256 
different items. It may be worth saying again that these items 
could be numbers but that they could equally well be charac- 
ters, colours or anything else we choose. 

Just as we can examine the variety in what can be stored by a 
bit and a byte, so we can examine the variety in what can be 
displayed on a screen. A screen display is composed of dots and, 
in the same way as a bit can occupy one of two states, so a screen 
dot takes on one of two states — it is either on or off. Therefore 
a single dot can give two different displays, two dots can give 
four displays, three dots eight and so on. Thus, the rectangular 
array of dots assigned for displaying a graphics character on the 
PET of 8 rows with 8 dots each can potentially give 2°*® = 2 
different displays. This number is, very approximately, 10!? or 
a one followed by nineteen noughts, so it is a very large number! 
In general, a block of dots consisting of V rows each with H dots 
can support 2H XV different images. 
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Now, to return to graphics, the way in which a screen display is 
held in the screen memory for a block graphics system is by assign- 
ing one byte to each screen position, so that the contents of a byte 
represent the character appearing in the corresponding position on 
the screen. This means that on the PET, where the screen has 25 
rows of 40 characters so that there are 1000 screen positions, the 
screen memory must consist of 1000 bytes. In general, for a 
block graphics system with a screen supporting NR rows each 
containing NC character positions, the screen memory size is 
NR X NC bytes. 

As we have seen, the contents of a byte can be any one of 256 
possibilities, and so any location on the screen of a block 
graphics system can display any one of 256 block characters. This 
means that the total number of displays possible on a block 
graphics system is 256 to the power (NR X NC) in general and, 
for the PET, 256 to the power 1000. The latter is a truly astro- 
nomic number, and although many of the displays that are 
possible are visually meaningless it does illustrate the potential of 
the system. 

In the previous section we have calculated the huge number of 
different characters that can potentially be displayed on a rec- 
tangular block of dots. The 256 characters that can be displayed 
in practice represent a tiny proportion of the patterns of dots 
that are possible. This illustrates that a huge variety of dot 
patterns is available for use as block characters and that it is 
important to choose from among them the ones that are most 
useful for graphics so as to make the system as useful as possible 
for this purpose. 

The way in which memory is assigned to screen positions in a 
block graphics system varies according to the type of micro- 
computer. The most common way, however, is to assign the first 
byte in the block of memory to the position in the top left corner 
of the screen, the second byte to the second position in the top 
row and so on, row by row as illustrated in Figure 2.6. To produce 
a screen display, the first byte of screen memory is examined, its 
contents represent a particular character and this character is 
placed at the top left of the screen. The second byte holds the 
code for the character to be placed in the next position on the 
screen. When this process has been carried out for the entire 
screen memory, the complete screen has been produced. The 
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SCREEN MEMORY 


SM 





SM +1 
SM+2 


COLUMN 


SCREEN 


Fig. 2.6. How the screen is mapped to memory. 


process is illustrated in more detail by Figure 2.7 which includes 
the character generator. This converts the contents of a byte 
(treated as a code) to the pattern of dots necessary to display a 
particular character on the screen. 

On the PET the screen memory starts at location 32768, so the 
locations occupied by the screen memory are numbered from 
32768 to 33767 inclusive. In general, if we denote the number of 
the first location in the screen memory by SM, then the screen 
memory extends from location SM to location SM+( (NRX NC) —1. 

When constructing displays, it is extremely useful to know the 
number of the memory location that corresponds to any screen 
position. A screen position is best identified by giving the column 
and row that it occupies, with the columns numbered from left 
to right and the rows from top to bottom. On the PET the code 
for the character in column I and row J is stored in memory 
location number: 


32768 +40(J —1)+I-1 
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Fig. 2.7. How a display is generated. 


The formula simply records that starting from the beginning of 
the screen memory J—1 complete rows and then I—1 positions 
in row J must be stored before the position in column I of row J 
is reached. To give two examples, the code for the position in the 
top left of the screen, which is in column | and row 1, is stored 
in location 32768 + (40 X 0) + O = 32768, and the code for the 
position three columns along the second row of the screen is 
stored in location 32768 + 40 X (2—1) + 3—1 = 32810. In general, 
the code for the character in column I and row J is stored in 
memory location number: 


SM + NC*(J—1) + 1-1. 


At this stage it should be clear that the way to produce a display 
on a block graphics system is to place the codes for the graphics 
characters that make up the display in the appropriate places in 
memory so that the characters appear in the desired positions 
on the screen. Displays are therefore produced by manipulating 
the screen memory. The BASIC command for directly changing 
the contents of the memory is POKE. 
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The command 


POKE M, N 


means ‘place the number N in memory location M’. 


Consequently, 
POKE 32768, 32 


places the number 32 in location 32768. 

When the location to which a number is poked is in the screen 
memory area, the command will automatically affect what appears 
on the screen. 


Pixel graphics 


When we examine the number of pixel graphics characters that are 
necessary when a character position is sub-divided to give a mosaic 
of pixels, we find ourselves back on familiar ground. Since each 
pixel (that is, each sub-division of the character-sized block) can 
be either black or white, a pixel can be in one of two states. Two 
pixels can assume any of four states and so on. Thus, if it is to be 
possible to turn off and on independently the pixels in any 
position on the screen, it is necessary to have 2* = 16 pixel 
graphics characters when the character position is divided into the 
quartered mosaic of four pixels as shown in Figure 2.8(a). For the 
2 X 3 mosaic of pixels shown in Figure 2.8(b), which is of the 
same kind as that used in Teletext transmissions, 2° = 64 pixel 
graphics characters must be used, and for the 2 X 4 mosaic of 
Figure 2.8(c) 2° = 256 characters are needed. The complete set 
of graphics characters on the quartered (2 X 2) mosaic is shown 
in Figure 2.9. 

The situation with pixels on a 2 X 4 mosaic is interesting, 
because the combination of a complete set of 256 graphics charac- 
ters with the fact that one byte can represent only 256 different 
items implies that when these graphics characters are used no 
other characters can be used with them. This implies that graphic 
displays of this kind cannot include text or, indeed, any other 
symbols at all. 
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(a) (b) (c) 


Fig. 2.8. (a) Layout of 2 X 2 mosaic of pixels. (b) Layout of 2 X 3 mosaic of 
pixels. (c) Layout of 2 X 4 mosaic of pixels. 
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Fig. 2.9. Complete set of characters with a 2 X 2 mosaic of pixels. 


When the array of dots assigned to a character position con- 
sists of 9 rows of 6 dots it can be divided very conveniently into 
a 2 X 3 mosaic of pixels, as shown in Figure 2.10(a), with each 
pixel consisting of a block with three rows of three dots. How- 
ever, if an array of 8 rows each of 8 dots is used for the character 
position, the division into a 2 X 3 mosaic is less straightforward. 
It is usually managed as shown in Figure 2.10(b) with the inevit- 
able consequence that some pixels are smaller than others, depend- 
ing on their position within a character. 

The codes for the pixel graphics characters are generated simply 
and systematically with reference to the scheme given in Figure 
2.11. The code for a particular character is obtained by adding to 
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Oo O00 f00 0 Oo 
OoOO00;00 0 O 
Oo O00;00 0 O 


Oo O0O0O0];00 O O 
OO00];]00 0 O 
O0O000;00 O O 


(b) 











Fig. 2.10. (a) Division of 6 X 9 array of dots into 2 X 3 pixel layout. (b) Divi- 
sion of 8 X 8 array of dots into 2 X 3 pixel layout. 





Fig. 2.11. Coding scheme for pixel graphics characters. 


128 the numbers shown in the positions where the pixels are ‘on’ 
in that character. Thus, the code for a blank character, where all 
the pixels are ‘off’, is 128, the code for the character with all the 
pixels ‘on’ is 128 +1+2+4+8 + 16+32 = 191. The codes for 
all the other characters lie between 128 and 191. 

The memory requirements and memory map for a pixel 
graphics system are essentially the same as those for a block 
graphics system. Displays on pixel graphics systems, with their 
improved resolutions relative to those of block graphics systems, 
can be generated in the same way as for the latter. However, all 
but the most primitive systems possess commands such as those 
given below to permit individual pixels to be manipulated. 


SET X, Y_ to turn ‘on’ the pixel in column X and 
row Y. 


RESET X,Y to turn ‘off the pixel in column X and 
row Y. 


POINT xX, Y to examine whether the pixel in column X 
and row Y is ‘off’ or ‘on’. 
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Line graphics 


In a line graphics system every dot in the rectangular grid covering 
the entire display can be independently on or off. With a mono- 
chrome display, the state of each dot can be represented by one 
bit, as shown in Figure 2.12(a), and so, as an example, a screen 
providing 192 rows each with 256 dots requires a screen memory 
of. 


192 X 256 bits = 122 * 296 bytes 


= 6144 bytes 
= 6 kbytes 
(Remembering that 1 kbyte = 2” bytes = 1024 bytes.) 


When a colour display is produced the amount of memory 
required naturally increases. If a dot is to be in any one of four 
colours, then two bits must be assigned to each dot, as shown in 
Figure 2.12(b), thereby doubling the amount of memory required 
compared to a monochrome display. If eight colours are used then 
three bits must be assigned to each dot, trebling the amount of 
memory needed and so on. 


pol spol sfols}ol 1] memory 





Oo @ O @ oO @ O @ SCREEN 
(a) 
MEMORY 
am 


Fig. 2.12. (a) Correspondence of screen and memory for monochrome display. 
(6) Correspondence of screen and memory for four-colour display. 
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The size of the screen memory needed for a high-resolution 
display providing HR rows each with HC dots when COL colours 
are used is: 


HR X HC X log, COL 
—________————. bytes 


8 


So when a 16-colour display providing 192 rows each with 320 
dots in this way is used the size of the screen memory is: 


192 X 320X log, 16 bytes = 192 X 320X 4 bytes 


8 8 
= 30720 bytes 
30 kbytes 


(The logarithm to the base 2 of a number is denoted by log,N. 
Taking a logarithm to the base 2 is the opposite of raising 2 to a 
power. Just as 2° = 8 means: ‘2 raised to the power 3 is 8’, so 
log, 8 = 3 means: ‘the power to which 2 must be raised to give 
8 is 3.’) 

One fact that these calculations should make clear is that high- 
resolution displays do require large amounts of memory. Since 
this memory is taken from the RAM area it is using the same area 
as the user’s program, and if more memory is taken up for the 
screen memory correspondingly less remains for a program. 

Of the two fundamental BASIC commands for producing pic- 
tures on high-resolution displays , one allows the ‘drawing head’ 
to be positioned at any dot on the screen and the other permits 
a line to be drawn by the ‘drawing head’ from its current position 
to a specified position. It may be demonstrated that the 
operations described by these commands are sufficient to produce 
any picture by considering how a picture is drawn with a pen. 
Now a picture consists of a number of lines. It can therefore be 
drawn by first moving the pen to one end of each line with the 
pen raised from the paper so that it leaves no mark. Then each line 
can be drawn by moving the pen while it is in contact with the 
paper so that it draws the line as it moves. The names for the 
commands vary widely from machine to machine as is illustrated 
in Appendix 1. Many machines use PLOT, or variants of it, in the 
names, but the most expressive names are probably MOVE and 
DRAW. Using the latter names, the commands work as follows: 
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MOVE C,R Move the ‘drawing head’ to the dot 
in column C and row R. 


DRAW C,R Draw a line from the current position 
of the “drawing head’ to the dot in 
column C and row R. 


When colour is used, the usual strategy is to set a colour in which 
all subsequent lines are drawn until a different colour is set. 


Summary 


Because a television display must be continually refreshed, the 
image to be displayed on the screen of a microcomputer must be 
stored. It is stored in a part of the microcomputer’s random 
access memory which is called the screen memory or video RAM. 
The amounts of memory necessary for this purpose are deter- 
mined for each of the three types of graphics system, and the way 
in which images are represented in memory is explored. The way 
in which memory locations are associated with display positions 
on the screen is called the screen memory map. 

An intimate knowledge of the screen memory map is needed 
when creating displays on block graphics systems because the 
graphics programming technique for these systems involves using 
the POKE command to place the necessary codes in the appro- 
priate locations in the screen memory to give the required image. 
With pixel graphics systems and line graphics systems a detailed 
knowledge of the memory map is not so important because they 
usually possess commands specifically for creating graphic dis- 
plays in their BASIC languages. These commands simplify con- 
siderably the task of creating pictures. The major commands for 
graphics in a pixel graphics system are SET and RESET which 
are, respectively, for turning an individual pixel on and off. With 
a line graphics system the major commands permit a drawing head 
to be positioned and a line to be drawn. While the commands 
themselves are widely available on different microcomputers, the 
names given to them are by no means universal. In this book we 
shall use the names MOVE and DRAW for these commands. 
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Summary of notation 


The notation introduced in this chapter is summarised here. We 
will adhere to it in subsequent chapters and it will also be used in 


the programs. 


Notation 


V 


H 


NR 


NC 


SM 


HR 


HC 


COL 


Self-test problems 


Meaning 
The number of rows of dots in the block 
assigned to a character. 


The number of dots per row in the block 
assigned to a character. 


The number of rows on a block graphics 
screen. 


The number of columns on a block graphics 
screen. 


The number of the first location in the 
screen memory. 


The number of rows of dots on a line 
graphics screen. 


The number of dots per row on a line 
graphics screen. 


The number of colours in use. 


1. When the image shown in Figure 2.2(a) is centrally located 
on a display screen providing an array of 10 X 9 dots, sketch 
the video signal necessary to generate it. 

2. A screen provides a rectangular array of dots consisting of 192 
rows each with 256 dots. 


(a) Give the resolution of a line graphics system using this 


screen. 


(b) Find the resolution of a block graphics system using this 
screen if an 8 X 8 block of dots is assigned to each 
character position. 

(c) Find the resolution of a pixel graphics system using the 
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same screen and character block if each character block is 
divided into a 2 X 3 mosaic of pixels. 


A screen has 10 rows each with 10 character positions. In each 
position it is possible to place a black block, a white block or 
a grey one. How many different displays can be produced? 

In a system design, 15 kbytes of RAM are set aside for screen 

memory. Investigate the combinations of resolution and 

number of colours used that are possible on an associated 
high-resolution display. 

A block graphics system has a screen displaying 25 rows each 

of 40 characters. The screen memory starts at location 3001. 

If the /ast location in screen memory corresponds to the screen 

position in row | and column 1, the last but one to the screen 

position in row | and column 2, and so on, find the general 
relationship between the memory locations and their corres- 
ponding screen positions. 

On a grid consisting of five rows each with four character 

positions sketch a diagonal line from bottom left to top 

right as best you can: 

(a) using completely black and completely white characters, 

(b) using all the quartered pixel characters, and 

(c) using all the characters on a 2 X 3 mosaic of pixels. 

Give the BASIC commands necessary to do each of the follow- 

ing: 

(a) Place an asterisk (code 42) at the top left corner of the 
screen of a PET. 

(b) Turn on the pixel in row 2 and column 2 and turn off 
the pixel in row 3 and column 4 of a pixel graphics 
system. 

(c) Draw a line from the dot in column 2 of row 2 to the dot 
in row 60 of column 20 of a line graphics system. 


Chapter Three 
Block Graphics 


An image to be displayed on a block graphics system can be 
designed by starting with a rectangular grid and then filling in 
the squares of the grid with the block graphics characters needed 
to compose the required image or, failing this, to approximate to 
that image. In much the same way a scheme for a tiled floor can 
be devised by filling in a grid with the appropriately designed 
tiles. Once the image is designed, it can be generated on a dis- 
play screen by using POKE commands to place the codes of 
the block graphics characters in the locations of the screen 
memory that correspond to the positions that the characters must 
occupy on the screen. There is actually no reason why the 
program that generates the display should not work out the 
numbers (or addresses) of the memory locations, thereby per- 
mitting the designer to work only in terms of the positions on 
the screen. Of course, the designer can only incorporate the block 
characters that are available to him into his images just as a floor 
design can only use the available tiles. 

For the purposes of this chapter, we shall use only block 
graphics characters from the set illustrated in Figure 3.1. This 
collection is a sub-set of the characters available on most block 
graphics systems. The codes that are given for the characters in 
the figure are the codes used by the PET. It is a simple matter to 
replace them with the codes used for the same characters by 
another computer, and a subroutine for converting from the 
code of one machine to that of another is given with the first 
program in this chapter. The Space Invader image shown in 
Figure 3.2 can be plotted on the screen in the position indicated 
by the row and column numbers on the figure using the following 
program: 


19 GOSUB 1000 
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Fig. 3.1. Block graphics characters and their codes. 
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20 PRINT“[CLS]” 

30 FORT=1 TO 12 

49 READ C, R, PC 

5@ AD=SM + NC*(R-1) + C1 

60 POKE AD, PC 

70 NEXT I 

80 DATA 20,19,254,21,19,252,19,20,254,20,20,251 
90 DATA 21,20,236,22,20,252,19,21,124,20,21 236 
100 DATA 21,21,251,22,21,126,19,22,255,22,22,127 
119 END 


The first line in this program calls a subroutine the purpose of 
which is to initialise the variables in the program that depend on 
the microcomputer being used. The subroutine is: 


1990 REM INITIALISE VARIABLES TO SUIT MICRO 
1019 PRINT ‘“ENTER,IN THIS ORDER, THE NUMBER OF” 
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1929 PRINT ‘““ROWS ON THE SCREEN, THE NUMBER 
OF’”’ 

1030 PRINT “CHARACTERS PER ROW AND THE FIRST” 

1949 PRINT “ADDRESS IN THE SCREEN MEMORY” 

1959 INPUT NR, NC, SM 

1969 RETURN 


19 20 21 22 


ie) 
20 
21 

22 





Fig. 3.2. Space Invader. 


The subroutine initialises more variables than are needed by 
this program, but it is intended as a standard routine that can be 
called by other programs in this chapter. 

Line 20 in the program causes the screen to be cleared when the 
‘clear the screen’ character is printed. The line uses a convention 
championed by Henry Budgett of Computing Today for repre- 
senting special characters in program listings by enclosing a code 
for them in square brackets. Thus when this line is typed the ‘clear 
the screen’ key should be pressed between the two uses of the 
inverted comma keys rather than typing exactly what is printed 
between them — the square brackets indicate that the convention 
is being used. The convention is used where necessary through- 
out this chapter, and Table 3.1 below gives the codes that are 
used. 


Table 3.1 Conventional representations for special keys. 


Key Convention 
Clear the screen. [CLS] 
Home the cursor. [HOM] 
Space. [SPC] 


N successive spaces. [N SPC] 
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The loop from line 30 to line 70 plots the 12 characters that 
make up the image by reading from the data the column and the 
row that each character should occupy and its code. The address 
of the location in the screen memory corresponding to each 
position is calculated before the code of the character is placed 
in the location with that address. 

Since the codes for the block graphics characters included in 
the data are those used exclusively by the PET, the program will 
give the expected image when run on a PET, but not on, say, a 
Sharp MZ-80A. However, if a subroutine to convert the codes to 
those used by the latter is called between reading them in line 40 
and placing them in the screen memory with line 60, the expected 
image can be obtained when the program is run by an MZ-80A. 
Since, for example, the characters with the codes 76, 255 and 
127 on the PET have, respectively, the codes 50, 108 and 91 on 
the Sharp MZ-80A, the subroutine can take the form: 


1599 REM CODE CONVERSION FROM PET TO MZ-80A 
1510 IF PC=76 THEN PC=50 : GOTO 1750 

1520 IF PC=255 THEN PC=198 : GOTO 175@ 

1530 IF PC=127 THEN PC=91 : GOTO 1750 


1759 RETURN 


With this subroutine in its complete form, all that is necessary to 
make the program produce its required results on the Sharp 
machine is to include the line: 


55 GOSUB 1500 


in the program. 

This program provides a framework for plotting any image that 
can be constructed from block graphics characters on any 
machine. The machine-dependent aspects are taken care of by the 
two subroutines for initialisation and code conversion, and the 
image can be altered by changing the number of characters it 
contains (in line 30) and by providing the data necessary to 
generate the new image. The graphics programmer who uses one 
machine exclusively may not care for all this generality in which 
case it is only necessary to omit the subroutines, replace the 
variables NR, NC and SM by the appropriate values and to use the 
character codes of the micro in question. It is worth remembering, 
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though, that should operations such as code conversion be neces- 
sary they can be performed much more quickly and reliably by 
a computer than by a person. 


Interaction 


In this section an interactive program for producing images is 
presented. It produces an image in exactly the same way as the 
program in the previous section, but the data is entered from the 
keyboard when the program is run. This has the advantage that the 
program can create a different image each time it is run whereas 
the previous program can only ever create the single image, a 
description of which is frozen in its data statements. The program 
is: 


19 GOSUB 1009 

20 DIM C(29), R20), PC(2@) 

30 PRINT “[CLS] ENTER, IN THIS ORDER, THE 
COLUMN” 

49 PRINT “ROW AND CODE OF EACH CHARACTER IN” 

5@ PRINT ‘““THE IMAGE. TERMINATE INPUT BY 
GIVING” 

60 PRINT “A COLUMN NUMBER OF ZERO” 

70 FOR I=1 TO 2@ 

80 INPUT C(I) 

90 IF C()=0 THEN K=I-—1: I=2@: GOTO 119 

109 INPUT RCD, PC()) 

110 NEXT I 

120 PRINT “[CLS]” 

13@ FOR J=1 TOK 

149 AD=SM + NC*(R(J)—1) + CVJ)-1 

15@ POKE AD, PC(J) 

169 NEXT J 

170 END 


This program expects the details of less than 20 characters to 
be entered and stores the data in three arrays before plotting the 
image with the loop from line 130 to line 160. To plot images 
containing more characters than this, it is necessary to increase 
the dimension of the three arrays declared in line 20 and to 
increase accordingly the number 20 appearing in lines 70 and 90. 

Figure 3.3 can be created with the characters in Figure 3.1 
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Fig. 3.3. Image composed of block graphics characters. 


using this program, and one of the programming exercises sug- 
gested at the end of this chapter is to generate the necessary data. 
This exercise is well worth trying because the best way to get a 
feel for block graphics programming is to do it. One point that 
emerges from trying to create this image is that it must be quite 
large on the screen: it is impossible to create it unless the image 
covers quite a large number of character positions. This suggests 
that, just as a draughtsman should not be afraid to let his drawings 
fill his sheet of paper, so block graphics images should, as far 
as possible, fill the screen. 


A drawing system 


A program which allows drawings or patterns to be created on the 
screen under the control of the user can be developed quite 
simply. It operates by providing the user with a character-sized 
drawing head, initially situated somewhere near the centre of the 
screen, which the user can move to any adjacent position using 
certain keys. When this is done repeatedly, the drawing head 
leaves behind it a trace, so providing the capability to generate 
low-resolution displays. 

The program takes advantage of the way that screen positions 
are mapped to memory locations. When a particular screen 
position, at which the drawing head might be located, is mapped 
to the memory location with address A, the block of eight posi- 
tions surrounding it (see Figure 3.4(a)) is mapped to a correspond- 
ing block of memory locations with addresses as shown in Figure 
3.4(b). So, when movement to an adjacent position takes place in 
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Fig. 3.4. (a) Screen position and adjacent positions. (6) Memory locations 
corresponding to a screen position and its adjacent positions. (c) Arrange- 
ment for indicating movement. 


any one of the eight possible directions it is easy to find the 
address of the memory location corresponding to the new posi- 
tion. 

To effect the movement of the drawing head, it is sensible to 
have a scheme that reflects the directions in which movement 
can occur. A fairly standard arrangement for controlling move- 
ments which can occur in any of eight directions has been 
developed, and is used by many programs. It involves the use of 
the numeric keypad possessed by many micros in which the keys 
for the numbers from 1 to 9 are arranged as shown in Figure 
3.4(c). The key for 5 is central, with the 6 to its right, and so this 
key is used for movement to the right. The 8 key is up from the 
5 and it is used for upward movement, and so on for the other 
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keys. This scheme for movement control is built into the follow- 
ing program for interactive drawing. 


10 GOSUB 1000 

20 PRINT “[CLS]” 

30 A=SM + NC*INT(NR/2) + INT(NC/2) 

40 POKE A, 160 

50 GET Q$: IF Q$=“” THEN 50 

60 IF Q$=“‘1” THEN A=A+NC—1: GOTO 40 
70 IF Q$=“‘2” THEN A=A+NC: GOTO 40 

80 IF Q$=“3” THEN A=A+NC+1: GOTO 40 
90 IF Q$="‘4” THEN A=A—1: GOTO 40 

100 IF Q$=“‘5” THEN 50 

110 IF Q$=“‘6” THEN A=A+1: GOTO 40 

120 IF Q$=“‘7” THEN A=A—NC—1: GOTO 490 
130 IF Q$=“8” THEN A=A—NC: GOTO 49 
140 IF Q$=“9” THEN A=A—NC+1: GOTO 49 
159 FOR I=1 TO 4 

169 PRINT ‘“ [HOM] THIS IS NOT A CONTROL KEY” 
170 FOR K=1 TO 109: NEXT K 

180 PRINT “[HOM] [25 SPC]” 

199 FOR K=1 TO 199: NEXT K 

200 NEXT I 

210 GOTO 50 


In line 40, the code 160 is the PET code for brightening an 
entire block. This code can be changed if another character is 
thought to provide a more effective display or if a different 
machine is being used. 

The program has been kept as short as possible so that the 
essentials of the drawing system can be seen clearly. No attempt 
has been made to keep the program ‘safe’, and the drawing head 
can be driven off the top or bottom of the screen. When driven 
off to one side it reappears at the opposite side. It is not difficult 
to modify the program to prevent such occurrences, or to make 
it display the position of the drawing head so that it is clear when 
the drawing head is about to leave the screen. 

All drawings made by the previous program are completely 
connected, consisting of one continuous trace. It is possible to 
amend the program so that the drawing position can be changed 
with or without producing a trace so that drawings with un- 
connected parts can be produced. If the previous program is 
amended by adding the control keys ‘B’ and ‘W’ to indicate 
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whether a black square (a space — PET code 32) or a white one 
should be plotted at the current position of the drawing head then 
the new system will not only permit the drawing head to be 
moved but will also allow lines to be erased. The amended 
program is listed below. 


19 GOSUB 1000 

20 PRINT “[CLS]” 

39 A=SM + NC*INT(NR/2) + INT(NC/2) 

40 PC=160 

5@ POKE A, PC 

69 GET QS§: IF Q$=“” THEN 60 

70 IF Q$=“B” THEN PC=32: GOTO SQ 

80 IF Q$=““W” THEN PC=16@: GOTO 50 

99 IF Q$=“1” THEN A=A+NC—1: GOTO 59 
100 IF Q$=“2” THEN A=A+NC: GOTO 5 
110 IF Q$=“3” THEN A=A+NC+1: GOTO 50 
120 IF Q$=“4” THEN A=A—1: GOTO 50 

13@ IF Q$=“5” THEN 60 

149 IF Q$="‘6” THEN A=A+1: GOTO 50 

15@ IF Q$=“7” THEN A=A—NC-—1: GOTO 50 
160 IF Q$=“8” THEN A=A—NC: GOTO 59 
170 IF Q$=“9” THEN A=A—NC+1: GOTO 59 
189 FOR I=1 TO 4 

199 PRINT “[HOM] THIS IS NOT A CONTROL KEY” 
200 FOR K=1 TO 100: NEXT K 

219 PRINT “[HOM] [25 SPC]” 

220 FOR K=1 TO 100: NEXT K 

230 NEXT I 

240 GOTO 60 


An indication of the position of the drawing head would be 
particularly useful with this program. By providing means of 
moving and drawing with a drawing head, this program provides 
rather primitive versions of the MOVE and DRAW commands 
that are available on line graphics systems. 


Improving the resolution (1) 


The drawings produced by the programs of the previous section 
using full-sized blocks for the drawing character can appear rather 
clumsy. The apparent resolution of the drawings can be improved 
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by using a set of characters, rather than a single one, and choosing 
the appropriate character from the set as the plotting character 
each time the drawing head is moved. The choice of graphics 
characters for this purpose is not a simple matter. Supposing that 
horizontal, vertical and diagonal lines from the left-hand column 
in Figure 3.1 are to be used, then a drawing such as that in Figure 
3.5(a) could be produced by the control sequence 9, 6, 8. This 
diagram shows a connected line of the type we might expect to 
obtain. However, if we use the same three graphics characters 
the sequence 1, 4, 1, 2 gives the disconnected and rather meaning- 
less display shown in Figure 3.5(b) whereas we might have hoped 
to get the connected line of Figure 3.5(c). This example shows 
that it is necessary to use different horizontal line characters 
(and vertical ones) in different circumstances if a continuous 
trace is to be produced. In general, when a set of characters is 
employed, the symbol to be used to extend a trace depends not 
only on the direction in which the trace is to be extended, but 
also on the state of the trace that has already been drawn. 


(a) (b) (c) 


Fig. 3.5. (a) Connected drawing. (6) Disconnected drawing. (c) Connected 
drawing corresponding to (b). 


The selection of the characters to be used in a particular appli- 
cation is clearly of paramount importance. Some of the problems 
encountered above with horizontal and vertical lines may be 
overcome by using the horizontal and vertical line characters in 
which the lines are centrally situated. However, if these charac- 
ters are used the diagonal line characters cannot be used with them 
to produce continuous lines. For the particular program to be 
given below the set of drawing characters to be used is that in 
Figure 3.7. With these characters the drawing head can only be 
moved to right and left or up and down. The improved resolu- 
tion trace that might be produced by a particular control sequence 
is shown in Figure 3.6. An ideal code for these characters can be 
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Fig. 3.6. An improved resolution trace. 
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Fig. 3.7. (a) |Ideal coding scheme. (6) Characters for improved resolution 
plotting with their ideal codes and (in brackets) their PET codes. 


systematically generated using the scheme shown in Figure 3.7(a) 
where the lines from the centre of the character to the middles of 
the edges are weighted 1, 2, 4 and 8. The code for a character is 
found by adding the numbers corresponding to the lines that 
are present in the character. Those characters to be used and 
their ideal codes are shown in Figure 3.7(b). Altogether, 16 
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characters can be composed including between none and four 
of the lines from the centre of the character. Only 12 of them are 
to be used here as the characters with only a single line from the 
centre to an edge are not required. 

So the task before us is to develop a program for generating 
improved resolution drawings, using a given character set, with 
which commands can be accepted for moving a drawing head to 
the right, the left, up and down. When the trace is to be extended 
to the right or the left the horizontal line character with ideal 
code 10 will be plotted, and for upward and downward extensions 
the vertical line character (ideal code 5) will be used. However, 
to ensure that the trace is continuous at all times, it is necessary 
to make changes to the last character in the trace before the 
trace is extended on occasions. The changes depend not only on 
the direction of the extension to the trace but also on the state 
of the trace. The state of the trace can be characterised by the 
direction in which it was last extended (denoted by DIR). The 
code used to represent the directions is part of that shown in 
Figure 3.4(c), with movement to the right indicated by 6, to the 
left by 4, up by 8 and down by 2. It can be noted here that when 
the code for the direction of extension is 4 or 6, the plotting 
character is the horizontal line and when it is 2 or 8 the plotting 
character is the vertical line. The possible states of the trace and 
the necessary actions when the different commands are given with 
the trace in each state are summarised in Figure 3.8. The program 
resulting from these considerations is listed below. 


10 GOSUB 1009 

20 PRINT “[CLS]” 

30 A=SM + NC*INT(NR/2) + INTCNC/2) 

49 PC=19: DIR=6 

5@ POKE A, PC 

60 GET Q$: IF Q$=“” THEN 60 

70 IF Q$=“2” AND DIR=2 THEN A=A+NC: GOTO 300 

80 IF Q$=“2” AND DIR=4 THEN POKE A, 6: A=A+NC: 
GOTO 3090 

90 IF Q$=2” AND DIR=6 THEN POKE A, 12: A=A+NC: 
GOTO 300 

109 IF Q$=“2” AND DIR=8 THEN A=A+NC: GOTO 300 

110 IF Q$=“‘4” AND DIR=2 THEN POKE A, 9: A=A~—1: 

GOTO 300 
120 IF Q$=“4” AND DIR=4 THEN A=A—1: GOTO 309 
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Fig. 3.8. Action to extend trace for each state of the trace and for each 
command. 


130 IF Q$=““4” AND DIR=6 THEN A=A—1: GOTO 3090 

149 IF Q$=“4” AND DIR=8 THEN POKE A, 12: A=A—1: 
GOTO 300 

15@ IF Q$=“6” AND DIR=2 THEN POKE A, 3: A=A+1: 
GOTO 300 

160 IF Q$=“‘6” AND DIR=4 THEN A=A+1: GOTO 300 

170 IF Q$=“6” AND DIR=6 THEN A=A+1: GOTO 300 

180 IF Q$=“6” AND DIR=8 THEN POKE A, 6: A=A+1: 
GOTO 300 

199 IF Q§=“8” AND DIR=2 THEN A=A—NC: GOTO 300 

209 IF Q$=“8” AND DIR=4 THEN POKE A, 3: A=A—NC: 
GOTO 309 

210 IF Q$=“8” AND DIR=6 THEN POKE A, 9: A=A—NC: 
GOTO 300 

220 IF Q§=“8” AND DIR=8 THEN A=A—NC: GOTO 300 

230 FOR I=1 TO 4 

249 PRINT “[HOM] THIS IS NOT A CONTROL KEY” 

259 FOR K=1 TO 100: NEXT K 

260 PRINT “‘[HOM] [25 SPC]” 

270 FOR K=1 TO 100: NEXT K 

280 NEXT I 
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299 GOTO 60 

309 DIR=VAL (Q$) 

3190 IF (DIR=2) OR (DIR=8) THEN PC=5 
320 IF (DIR=6) OR (DIR=4) THEN PC=10 
330 GOTO 50 


Hopefully, the way in which the program works is clear, but as 
it stands it does have shortcomings. One is that, since the program 
uses ideal codes it will not run on any micro as it stands. However, 
all that is needed is a code conversion subroutine to convert the 
ideal codes to the codes of the micro being used. The necessary 
changes are to replace line 50 by: 


50 GOSUB 2099 
55 POKE A, PC 


to include the code conversion subroutine which, for the PET, 
can be written with reference to Figure 3.7(b), where the PET 
codes are given in brackets, as: 


2099 REM CONVERSION OF IDEAL CODES TO PET 
CODES 

2019 IF PC=@ THEN PC=32: GOTO 2150 

2020 IF PC=3 THEN PC=109: GOTO 2159 


2159 RETURN 


and to replace the ideal codes used in the body of the program. 

A second shortcoming is that when the trace is extended so 
that it crosses a previously drawn part, plotting the new character 
simply obliterates the old one and can cause the trace to be dis- 
connected. The program, and the results it gives, can be improved 
by making it look ahead to determine if a previously drawn part 
of the trace is about to be crossed, and if it is to plot a character 
which retains the existing part of the trace as well as extending the 
trace in the desired way. To give an example, if the program 
should need to plot a vertical line (code 5) over a part of the trace 
where a horizontal line (code 10) already exists, then by plotting 
the cross character (code 15) the existing trace can be retained at 
the same time as the trace is extended. The look-ahead can be done 
by using PEEK. The code for the character to be used to extend 
the trace can be calculated by using a series of statements such as 
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IF PEEK(A)=1@ AND PC=5 THEN PC=15 


with a statement of this kind to cover each possible case. How- 
ever, a much more compact way to do this is by using 


PC=PEEK(A) OR PC 


This works in all cases, taking advantage of the way in which 
the characters are coded. The use of the logical OR function en- 
sures that the result records which of the lines from the centre of 
the character is present in either one or the other of the two 
characters to be combined. In this way it gives the code for the 
character consisting of all the lines in the existing character plus 
any extra lines that may be contributed by the new one. 

This explanation assumes that all the operations are carried out 
in the ideal code but, of course, when a real micro is used the 
PEEK command will return the codes used by that machine. The 
simple method of finding the updating character depends on the 
use Of the ideal code, and so a code conversion must first be per- 
formed. A subroutine for this can easily be written with reference 
to the routine for the opposite conversion given above. It is: 


3009 REM CONVERSION OF PET CODES TO IDEAL 
CODES 

3919 IF PE=32 THEN PE=@: GOTO 3150 

39020 IF PE=199 THEN PE=3: GOTO 3150 


3159 RETURN 


The program can now be amended by including instructions for 
the sequence of events given by: 


@ Get the real code. 

@ Convert it to the ideal code. 

@ Perform the manipulations in the ideal code. 
@ Convert the ideal code to the real code. 


The complete program can now be arrived at by replacing line 50 
in the program listed above in this section by: 


5Q@ PE=PEEK(A) 
52 GOSUB 3000 
54 PC=PE OR PC 
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56 GOSUB 2000 
58 POKE A, PC 


The relative complexity that has been assumed by a program 
intended for a moderately simple graphics task is rather typical 
of what is liable to happen when using a block graphics system. 
The problems that arise can be overcome, but it is fair to say that 
some ingenuity is usually needed along with a good deal of pro- 
gramming expertise. The importance of the available set of block 
graphics characters in a particular application is also well illus- 
trated. Other characters may well have been more helpful in this 
application and may have helped to improve the resolution that 
could be obtained. An examination of the traces produced by the 
two drawing systems developed above shows that the system pro- 
ducing lines can attain some improvement in resolution over the 
system using blocks, but the lines drawn are just as angular in both 
cases even if the results produced by the block system are rather 
more ‘grainy’. 

A choice of graphics characters that is well suited to a particular 
application can make it much simpler to realise than with a poorly 
chosen set. Some micros, including the Exidy Sorcerer, permit the 
user to create and use his own graphics characters, and this is 
clearly a considerable convenience. 


Making things bigger 


There are some applications in which large figures and numbers are 
desirable, for instance in an eye-catching display for promotion or 
advertising, and in an educational program for use in a primary 
school. To illustrate this using the numbers one to five, there is no 
need to be restricted to the ordinary character-sized numbers 
because large ones can be designed as shown in Figure 3.9(a). 
Each number can be displayed by poking the block of codes 
needed to create it into the appropriate memory locations. The 
blocks of codes for the numbers are shown in Figure 3.9(b). 

The following program generates addition problems using the 
numbers from one to five and displays them with the numbers 
and symbols in the large formats. One of the exercises at the end 
of the chapter is to extend this program to accept and display 
answers indicating whether they are correct. The program is: 
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Fig. 3.9. (a) Large numbers. (6) Codes for large numbers. 






19 GOSUB 1900 
20 PRINT “‘[CLS]” 
39 A=INT (4*RND(2))+1 
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40 B=INT (3*RND(A))+1 

5@ X=A: PS=1: GOSUB 5000 

69 X=6: PS=2: GOSUB 5090 

79 X=B: PS=3: GOSUB 5090 

80 X=7: PS=4: GOSUB 5090 

99 END 

5090 R=INT(NR/2): C=5*PS: AD=SM+NC*(R—1)+C—1 

5010 RESTORE: IF X=1 THEN 5950 

5020 FOR I=1 TO X-1 

5030 FOR J=1 TO 12: READ D: NEXT J 

5049 NEXT I 

5050 FOR RO=1 TO 4 

5069 FOR CO=1 TO 3 

5070 READ D 

5080 POKE AD+CO, D 

5099 NEXT CO 

5199 AD=AD+NC 

5119 NEXT RO 

5120 DATA 32,198,97,32,32,97,32,32,97,32,1 24,226 

5130 DATA 108,226,127,32,32,255,108,226 32,124,226, 
226 

5140 DATA 198,226,127,32,108,255,108,32,225 32,226, 
126 

515@ DATA 32,108,97,108,126,97,124,226,236,32,32,126 

5160 DATA 225,226,226,124,226,127,198 32,225 32,226, 
126 

5170 DATA 32,108,32,108,254,98,32,225,32,32,32,32 

5180 DATA 32,32,32,32,98,98,32,98,98,32,32,32 

5199 RETURN 


Movement and animation 


The original program for producing drawings presented earlier in 
the chapter in the section entitled ‘A drawing system’ can be 
simply adapted to control the movement around the screen of a 
block. If the drawing head in that program is prevented from leav- 
ing a trail the display will show only the drawing head itself 
moving under the user’s control. This effect can be achieved by 
suppressing the drawing head in its current position just before it 
is moved to its new position each time. The necessary changes in 
the program can be achieved by putting a space in the current 
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position of the drawing head immediately before it is moved, and 
this is done by making POKE A, 32 the first command in the 
conditional part of each of the IF—THEN statements from line 60 
to line 140 (except line 100). A typical IF—THEN statement 
should then read: 


60 IF Q$=“1” THEN POKE A, 32: A=A+NC—1: GOTO 40 


An image composed of a block of characters can be moved in the 
same way as this program can control the movement of the single 
block used to display the position of the drawing head. 

An elementary example of animation can be given using the 
‘Space Invader’ of Figure 3.2. It can be made to ‘blink’ repeatedly 
by changing the graphics characters in positions 20 and 21 of row 
20 to solid bright squares and then back again repeatedly. The 
complete program is: 


10 GOSUB 1099 

20 PRINT “[CLS]” 

30 FOR I=1 TO 12 

40 READ C,R,PC 

5@ AD=SM+NC*(R—1)+C—1 

60 POKE AD,PC 

70 NEXT I 

80 BL=SM+NC*19+19 

90 POKE BL,160: POKE BL+1,160 

100 FOR K=1 TO 100: NEXT K 

119 POKE BL,251: POKE BL+1,236 

120 FOR K=1 TO 100: NEXT K 

139 GOTO 99 

149 DATA 20,19,254,21,19,252,19,20,254,20,20,251 
150 DATA 21,20,236,22,20,252,19,21,124,20,21,236 
160 DATA 21,21,251,22,21,126,19,22,255,22,22,127 


By changing the number of times the empty loops in lines 100 
and 120 are executed, different delays can be introduced, and 
the program can be adapted fairly easily to give more complex 
patterns to the blinking. The techniques for animation and move- 
ment can be combined to give interesting mobile displays. How- 
ever, it is generally true to say that when generating mobile 
displays using the POKE command from BASIC it is difficult to 
make displays of any complexity alter sufficiently quickly to give 
realistic animated effects. A micro that can handle ‘sprites’ is 
necessary for this. 
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A graph can be plotted on a block graphics system’s display 
screen, although in general a continuous curve cannot be generated 
because of the lack of variety in the character set. One way to 
create a curve is similar to the first step followed when plotting a 
curve on graph paper where individual points are plotted before 
actually joining the points with the curve. Positioning an asterisk 
appropriately in each column of the screen can give the shape of 
a curve quite effectively. After developing a program to produce 
curves in this way, we shall examine ways to improve its accuracy. 


Fig. 3.70. Two cycles of a sine wave. 


Let us develop a program to plot two cycles of a sine wave 
situated on the screen as shown in Figure 3.10. There are NC 
columns in each of which an asterisk can be placed to repre- 
sent a point on the curve, so the function: 


Y=SIN (4*PI*X/NC) 


will give the vertical heights, Y, for each column as X takes on 
values from | to NC. The values for Y range from —1 to +1 and 
so do not accord very well with the row numbers, but the function 


Y=12 + 8* SIN(4*PI*X/NC) 
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takes on values from 4 to 20, and these can conveniently be used 
directly as row numbers. The remaining problem is that since the 
rows are usually numbered from the top downwards on a block 
graphics screen, the curve will be inverted unless steps are taken 
to prevent it. The following program results from taking these 
factors into account. 


10 GOSUB 10900 

20 PI=3.1415926 

30 PRINT“[CLS]” 

40 FOR X=1 TO NC 

5@ Y=12+INT(8*SIN(4*PI* X/NC)) 
60 Y=NR+1-—Y 

70 AD=SM+NC*(Y—1)+X—1 

8% POKE AD,42 

990 NEXT X 

199 GOTO 109 


The final line is added to prevent the program from halting 
so that no screen messages can appear to spoil the display. 


Improving the resolution (2) 


The accuracy with which the curve is plotted can be improved 
considerably by using one of a group of characters as appro- 
priate rather than a single plotting character. Most micros possess 
8 different horizontal line characters, as illustrated in the third 
column of Figure 3.1, and using these can clearly permit the 
accuracy with which the value to be plotted is indicated in each 
column to be improved by a factor of 8. Using the codes given in 
Figure 3.1, the improved program is: 


19 GOSUB 1000 

20 PRINT “[CLS]” 

3% K=SQR(NR) 

49 FOR X=1 TO NC 

5@ V=1+(K*X/NC)t 2 

60 Y=INT(V) 

70 R=V—Y 

80 Y=NR+1-—Y 

99 AD=SM+NC*(Y—1)+X—1 

109 IF R>7/8 THEN PC=99: GOTO 189 
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110 IF R>6/8 THEN PC=69: GOTO 189 
120 IF R>5/8 THEN PC=68: GOTO 189 
130 IF R>4/8 THEN PC=67: GOTO 189 
140 IF R>3/8 THEN PC=64: GOTO 189 
159 IF R>2/8 THEN PC=70: GOTO 180 
169 IF R>1/8 THEN PC=82: GOTO 180 
179 PC=100 

189 POKE AD,PC 

199 NEXTX 

200 GOTO 209 


When the block of dots on which a character is placed has eight 
rows each with eight dots, the eight horizontal line characters 
correspond to the eight rows in the block. Thus, when these 
characters are used in the way illustrated above, they permit the 
full dot resolution of the screen to be accessed in the vertical 
direction. 


Creating images with PRINT 


It is possible to create images using the PRINT command rather 
than POKE. Indeed, the Texas Instruments TI99/4A does not 
possess a POKE command, so that on this machine, at least, it 
is essential to use PRINT to create graphic displays. The funda- 
mental idea when using PRINT for this purpose is to locate the 
printing position at the required place (or, what is the same 
thing, locate the cursor at the required place) and then to print 
the required character. To do this, the cursor control capabilities 
can be used for positioning, and the required character can then 
be printed either directly or by giving its code in the CHRS func- 
tion. To represent the cursor movements in BASIC statements 
we shall use the Computing Today convention introduced earlier. 
The conventional representations given below extend the previous 
table. 


Table 3.2 More conventional representations for special keys. 


Key Convention 
Cursor down [CD] 
Cursor up [CU] 
Cursor right [CR] 


Cursor left [CL] 
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To illustrate the use of PRINT, an asterisk, which has code 42, 
can be placed in column 20 and row 15 by each of the direct 
commands which are written below using the convention: 


PRINT “[HOM][19 CR] [14 CD] *” 
and 


PRINT “[HOM][19 CR] [14 CD]; CHRS(42) 


Note that since homing the cursor places it in column | and row 1, 
only 19 movements of the cursor to the right are necessary to 
reach column 20, and 14 cursor downs to reach row 15. 

A program to plot the Space Invader of Figure 3.2 using PRINT 
rather than POKE, but following the same scheme as the program 
for generating it with POKE commands, is listed below. It is 
written as if for the PET, but unfortunately does not give the 
desired results on that machine because of a quirk of the PET 
which does not permit ‘reversed’ characters to be produced from 
the use of CHRS. 


19 PRINT“[CLS]” 

20 FOR I=1 TO 12 

30 READ C, R, CH 

49 GOSUB 6090 

5@ PRINT CHRS(CH) 

60 NEXT I 

70 DATA 20,19,254,21,19,252,19,20,254,20,20,251 
80 DATA 21,20,236,22,20,252,19,21,188,20,21,236 
99 DATA 21,21,251,22,21,190,19,22,255,22,22,191 
199 END 

6990 REM ROUTINE TO POSITION CURSOR 
6010 PRINT“[HOM]”; 

6020 IF C=1 THEN 6060 

6930 FOR K=1 TOC-1 

6040 PRINT“[CR]”; 

6050 NEXT K 

6060 IF R=1 THEN 6100 

6070 FOR J=1 TO R-1 

6080 PRINT“[CD]”: 

6090 NEXT J 

6100 RETURN 


Note that the codes used with CHRS are different from those 
used with POKE. This is true for most machines since CHR$ uses 
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ASCII codes as far as possible, while the codes used with POKE 
tend to be entirely machine-dependent. A better version of the 
positioning subroutine is: 


600% REM IMPROVED POSITIONING ROUTINE 
6010 AS=“[HOM] [39 CR]” 

6020 BS=“[24 CD]” 

6030 PRINT LEFTS(A§$,C); 

6040 IF R=1 THEN 6060 

6050 PRINT LEFTS(B$,R—1); 

6969 RETURN 


All the graphics programs of this chapter that use POKE can be 
converted to equivalent programs that use PRINT by replacing the 
statements that calculate the memory location corresponding to a 
screen position with a cursor positioning routine, and by replacing 
POKE commands with commands of the form PRINT CHRS(J), 
but making sure that the appropriate code values are used for J. 
Again, certain values of J will cause effects such as clearing the 
screen and, indeed, moving the cursor, rather than directly print- 
ing a character. On some systems certain values for J can be used 
to set the colour in which subsequent characters are printed, or to 
cause the next printed characters to flash. There is, however, no 
uniformity either in the facilities of this kind possessed by micro- 
computers or in the codes used for them, so that it is not possible 
to present any reasonably general treatment. 


Summary 


Images to be displayed by block graphics systems are designed 
using the available block graphics characters as building blocks, 
and are then produced by placing the codes for the characters 
in the memory locations that correspond to their positions on the 
screen using the POKE command. A plotting program can itself 
be made to compute the addresses of the memory locations using 
the screen memory mapping function so that the programmer 
need only concern himself with the screen positions. The basic 
methods for generating displays are developed and are then 
adapted to produce techniques for interactively developing images, 
for movement, animation and graph plotting. It has to be admitted 
that a number of these techniques are ad hoc. This stems from the 
fact that the basic technique for image generation is very simple. 
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However, a basic set of techniques for block graphics programming 
is presented, and the ways in which they can be adapted and devel- 
oped for various applications are demonstrated. 

The set of graphics characters that is available exerts a consid- 
erable influence on the images that can be produced. It is shown 
how a careful selection of the graphics characters to be used in a 
particular application can simplify its programming, and be used 
to give such benefits as improved resolution. The facility possessed 
by some micros which permits their users to design their own 
graphics characters can be invaluable since different characters 
are likely to be more suitable in different applications. 

The technique of code conversion is demonstrated and is 
extremely useful, permitting as it does the writing of machine- 
independent programs and the use of idealised codes which can 
simplify processing operations. 


Suggested programming exercises 


1. Generate the data necessary for one of the drawing programs 
presented in this chapter to produce Figure 3.3. (Hint: You 
will find that the square front of the box needs to be at least 
six characters square to avoid trying to put two characters 
in the same position.) 

2. Design a set of graphics characters suitable for use by a pro- 
gram for playing Poker which can display the hands being 
played. 

3. Extend the program for displaying addition problems so that 
it accepts an answer, displays it and indicates whether or not 
it is correct. (Hint: Remember that the result of the addition 
can be anything up to 9, so that some more large format 
numbers must be designed.) 

4. Design three (or more) pictures of a person walking, catching 
different positions in the stride. Then write a program to plot 
these ‘frames’ successively to give an animation effect. (Hint: 
If you can plot one picture, you can successively plot a second 
and a third just as easily.) 

5. Adapt the movement control program to move a ‘Space 
Invader’ around the screen. 

6. Adapt the graph plotting program to plot a different curve — 
perhaps a damped sine wave or a logarithm. 

7. On the PET, if a character has a code from O to 127, adding 
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128 to the code gives the code for the ‘reversed’ character. 
(The ‘reversed’ character is white where the original was black 
and black where it was white.) Write a program to reverse the 
contents of any selected rectangular region of the screen. 
(Hint: A PEEK at the location corresponding to a screen 
position gives the code for the character displayed there. 


Adding 128 to this code gives the code for the ‘reversed’ 
character.) 


Chapter Four 
Pixel Graphics 


With pixel graphics improved resolution can be obtained using 
what is essentially a block graphics display, but one with access 
to a special group of characters. The characters are obtained by 
sub-dividing the character-sized block, and different characters 
have different patterns of bright and dark sub-divisions. The 
complete set of characters permits independent access to any 
subdivision of any character in order to make it dark or bright. 
The units obtained by sub-dividing a character are known as 
pixels (short for picture cells). The most common way to sub- 
divide a character block is into two columns and three rows 
giving six pixels, but systems supporting a 2 X 2 sub-division to 
give four pixels and a 2 X 4 sub-division giving 8 pixels also 
exist. Although most micros possess graphic commands specific- 
ally for the elementary manipulation of pixels, we shall begin this 
chapter by showing how to construct the fundamental tools for 
manipulating pixels. Later we shall go on to explore the ways 
in which the pixel graphics commands can themselves be used. 


Creating the commands 


The fundamental commands for manipulating a pixel must enable 
it to be turned on and off, and to be examined to determine if 
it is on or off. We shall develop BASIC routines for each of these 
purposes. 

Figure 4.1 shows the character positions on a screen each 
divided into a 2 X 3 array of pixels. With reference to this figure, 
if we want to turn on the pixel in column 8 and row 1O in the 
situation when the screen is blank, then we must place in character 
column 4 and character row 4 the pixel graphics character with 
code 128 + 2 = 130 (refer to Figure 2.11 for the codes). If the 
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Fig. 4.7. Character positions and pixel positions. 


screen is not clear before this pixel is turned on, we must take care 
not to turn off any other pixels when this one is turned on. 

In trying to generalise the procedure of the previous para- 
graph so that a routine to turn any pixel on can be developed, 
great care must be taken to distinguish between the pixel rows 
and columns and the character rows and columns. The following 
notation will be used 


Notation Meaning 
CX Number of character column 
PX Number of pixel column 
CY Number of character row 
PY Number of pixel row 


To illustrate the use of this notation, the example just given 
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shows that the pixel located by PX = 8, PY = 10 is on the 
character located by CX = 4, CY = 4. Initially, a 2 X 3 mosaic of 
pixels will be used for the purposes of illustration and, in fact, 
the programs will be written as if for a Tandy TRS-80, using the 
values appropriate to that machine for the number of lines and so 
on, rather than using an initialisation subroutine as in the previous 
chapter. 

It is possible to determine the character column from the pixel 
column quite easily. Figure 4.1 shows that pixel columns 1 and 2 
correspond to character column 1, pixel columns 3 and 4 to 
character column 2 and so on. A formula relating the two column 
numbers is 


CX=INT ((1+PX)/2) 


Further, if PX is odd the pixel will be in the left-hand column of a 
character while if PX is even it will be in the right-hand one. This 
is the same as saying that if 1 + PX is exactly divisible by two the 
pixel is on the left whereas, if dividing 1 + PX by two gives a 
remainder, the pixel is on the right. Therefore, coding the columns 
(and rows) of the mosaic of pixels on a character as shown in 
Figure 4.2, the expression to determine the column of a character 
holding a pixel is: 


RX=1 + PX — 2*INT((1+PX)/2) 


Rx | 0 





Fig. 4.2. Scheme for locating pixel positions. 


Similarly, since pixel rows 1, 2 and 3 correspond to character row 
1, pixel rows 4, 5 and 6 to character row 2 and so on, the pixel 
row and corresponding character row are related by: 


CY=INT((2+PY)/3) 


Referring to Figure 4.2 again, the row in the mosaic that holds the 
pixel is given by the value of RY calculated from: 
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RY=2+PY —3*INT((2+PY)/3) 


With the pixel located on the character in this way, the code for 
the pixel graphics character is obtained by raising 2 to the power: 


RX + 2*RY 


and adding 128 to it. 
The program developed in this way to plot a single pixel at a 
prescribed location on a cleared screen is: 


19 CLS 

20 PX=15 

30 PY=4 

40 CX=INT((1+PX)/2) 

59 RX=1 + PX — 2* INT((1+PX)/2) 
60 CY=INT((2+PY)/3) 

70 RY=2 + PY —3*INT((2+PY)/3) 
80 AD=15360 + 64*(CY—1) + CX—1 
99 PO=RX +2*RY 

10@ PC=128 + 2tPO 

119 POKE AD, PC 


Note that line 10 gives the command for clearing the screen on 
the TRS-80, and that the numbers in line 80 are specific to the 
TRS-80. 

If the screen already contains a graphic display, rather than 
being clear, then turning on a single pixel in the way described 
above can obliterate any other pixels that are turned on at the 
character position containing the new pixel. To avoid this, a sub- 
routine that is intended to turn on a single pixel independently 
must examine the character position at which the pixel is to be 
turned on and place in that position a character which not only 
retains any pixels already turned on, but also turns on the new 
one. That is, each pixel in the character that should be used will 
be on either if it is already on or if it is the new pixel to be turned 
on. The subroutine could be: 


1990 REM TURN ON INDEPENDENTLY PIXEL PX, PY 
1919 CX=INT((1+PX)/2) 

1920 RX=1+PX — 2*INT ((1+PX)/2) 

1930 CY=INT ((2+PY)/3) 

1049 RY=2+PY — 3*INT ((2+PY)/3) 

1959 AD=15360 + 64*(CY—1) + CX—1 

1969 PO=RX + 2*RY 
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1070 PE=PEEK (AD) — 128 
1980 PT=PE OR (2tPO) 
1990 PC=128 + PT 

1199 POKE AD, PC 

1119 RETURN 


This subroutine can be amended to turn off a specified pixel 
by changing line 1080 to: 


1089 PT=PE AND (NOT (2tPO)) 


It can also be amended to examine an individual pixel using a 
variable, P say, to return a value of 0 if the pixel is off and 1 if 
it is on by replacing lines 1080 to 1100 with: 


1089 PT=PE AND (2tPO) 
1099 IF PT=0 THEN P=@: GOTO 1119 
1109 P=1 


All three capabilities can be combined in a single subroutine with 
the value assigned to a variable W when the subroutine is called 
indicating which function it should perform in this way. If W is 
positive the indicated pixel is to be turned on; if W is zero the 
pixel is to be turned off; and if W is negative the pixel should be 
examined and its state returned. The multi-purpose subroutine is: 


1500 REM SUBROUTINE TO SET, RESET OR 
1510 REM EXAMINE A PIXEL ACCORDING TO 
1520 REM THE VALUE OF W 

153@ CX=INT ((1+PX)/2) 

1540 RX=1+PX — 2*CX 

155@ CY=INT ((2+PY)/3) 

1560 RY=2+PY — 3*CY 

1570 AD=15360 + 64*(CY—1) + CX—1 

1580 PO=RX+ 2*RY 

15990 PE=PEEK(AD) — 128 

1600 IF W<@ THEN 1660 

1610 IF W=@ THEN PT = PE AND (NOT (21 PO)) 
1620 IF W>9 THEN PT = PE OR (21PO) 

163@ PC=128 + PT 

1649 POKE AD, PC 

1650 RETURN 

1660 PT=PE AND (2tPO) 

1670 IF PT=@ THEN P=0: GOTO 1690 

1680 P=] 

1699 RETURN 
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This subroutine can be generalised in a straightforward way to 
run on any pixel graphics system. The generalised version, using 
the variable names that are listed at the end of Chapter 2 plus VP 
for the number of rows of pixels on a character is given below. It 
requires that values are assigned to the system-dependent variables 
before the subroutine is called, and it is assumed that the pixels 
on a character are coded in the same fashion as illustrated in 
Figure 4.2. If a different coding is used, then some code conver- 
sion will of course be necessary. 


15090 REM GENERAL SUBROUTINE TO SET, RESET 
1510 REM AND EXAMINE A PIXEL 

1520 CX=INT ((1+PX)/2) 

1530 RX=1 + PX—2*CX 

1549 CY=INT ((VP—1+PY)/VP) 

1550 RY=VP — 1+ PY — VP* CY 

1569 AD=SM + NC* (CY—1) + CX-1 

1570 PO=RX + 2* RY 

1580 PE=PEEK(AD) — 128 

1599 IF W<@ THEN 1659 

1600 IF W=0 THEN PT=PE AND (NOT (21tPO)) 
1610 IF W>9 THEN PT=PE OR (2tPO) 

1620 PC=128 + PT 

1630 POKE AD, PC 

1649 RETURN 

1650 PT=PE AND (2 tPO) 

1660 IF PT=0 THEN P=0 : GOTO 1680 

1670 P=1 

1680 RETURN 


Line 153@ can be replaced by: 
153@ RX=(1+PX) AND 1 


which is a more direct way to determine if (1+PX) is even or odd, 
but it is not used in the program because it is more difficult to 
generalise it in calculating RY. 


Shapes, lines and curves 


For the remainder of this chapter the commands SET, RESET 
and POINT will be used in the programs for developing graphic 
displays. Since the ways in which these commands can be provided 
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on any system not already possessing them have been demon- 
strated it is reasonable to use them, and besides this the programs 
will be much easier to read and to understand if they contain 
lines such as SET X, Y rather than W=1 : GOSUB 1599. 





Fig. 4.3. Large ‘E’. 


_ Images can be displayed in much the same way as on a block 
graphics system or by using the SET command. The large letter 
E shown in Figure 4.3 is composed of six characters, so that it 
can be generated using six POKE commands. It is also made up of 
18 pixels and so can be generated by 18 SET commands. To plot 
the image at the top left corner of the screen with the block 
graphics technique the program is: 


10 POKE SM, 151: POKE SM+1, 131 
20 POKE SM+NC, 157: POKE SM+NC+#1, 149 
30 POKE SM+2*NC, 181: POKE SM+2*NC+1, 176 


With pixel graphics commands it is: 


19 FOR K=1 TO 4 

20 SET (K, 1): SET(K, 5): SET(K,9) 
30 NEXT K 

49 FOR K=2 TO 8 

5% SET (1, K) 

69 NEXT K 


When turning a pixel on using SET, the column occupied by the 
pixel is given first and its row second. We shall consistently identify 
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the position of a pixel in this way, so that the pixel (10, 7) is the 
pixel in column 10 and row 7. Comparing the two programs 
above shows that being able to use the SET command relieves the 
programmer of any concern with the screen memory. There is 
no need to compute the address of the memory location corres- 
ponding to a screen position or of the code to place in a memory 
location, and each pixel can be dealt with independently with no 
worries about obliterating other pixels. Consequently, the provi- 
sion of specific graphics commands makes the generation of 
graphic displays much easier, effectively allowing the programmer 
to program his graphics without needing to know anything about 
how the hardware which produces the graphics operates. 

Since many useful displays consist of a number of straight line 
segments, it is useful to be able to produce a line when its two 
end-points are given. If a subroutine is written to do this, it can 
be called by a main program several times in order to generate 
line drawings. The main program will only need the appropriate 
data to generate its output. 

The inputs to the subroutine are the positions of the two end- 
points given in the form (A, B), (C, D). The subroutine finds the 
pixel position with the lower column number, renames it (X1, 
Y1) and renames the other (X2, Y2). The line is drawn from 
position (X1, Y1) to position (X2, Y2) by placing a pixel appro- 
priately in each column from column X1 to column X2. The 
pixels can be readily positioned after calculating the slope of the 
line. The subroutine is: 


2000 REM SUBROUTINE FOR DRAWING A LINE 

2019 REM BETWEEN TWO END-POINTS 

2020 IF A<C THEN X1=A: Y1=B: X2=C: Y2=D: GOTO 
2040 

2030 X1=C: Y1=D: X2=A: Y2=B 

2040 SL =(Y2—Y1)/(X2—X]1) 

2050 SET(X1, Y1) 

2069 FOR I=1 TO X2 — X1 — 1 

2070 TX=X1 +1 

2080 TY=Y1+ INT (I*SL) 

2090 SET (TX, TY) 

2100 NEXT I 

2110 SET(X2, Y2) 

2120 RETURN 


A program to draw a five-pointed star which calls this subroutine is: 
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19 FOR J=1 TO 5 
20 READ A, B,C, D 

39 GOSUB 2090 

40 NEXT J 

5@ DATA 22, 10, 30, 30, 30, 39, 12, 18 
69 DATA 12, 18, 32, 18, 32, 18, 14, 30 
79 DATA 14, 30, 22, 10 


By changing the data, different drawings can be produced. The 
program can be simply adapted to accept data interactively. The 
data is expressed entirely in terms of screen positions, and in this 
way the program provides the capability to move and draw a line 
anywhere on the screen. 

Plotting a curve on the screen is quite a complicated matter. 
Suppose that we want to plot the part of the curve: 


Y=X? — 3X 


Fig. 4.4. Part of the graph of Y = X° — 3X. 


between X = —2 and X = 2 on the screen. The part of the curve 
in question has the form shown in Figure 4.4. To plot it effec- 
tively it is necessary to position it on the screen and to scale it so 
that it shows to best effect. It is probably best displayed centrally 
on the screen, and so vertical and horizontal axes are drawn 
through the centre of the screen. Assigning a central square of 
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40 by 40 pixels to the graph makes it sufficiently large and assigns 
10 pixels to a plotting unit along each axis. The graph can now be 
drawn by turning on a pixel in each column to indicate the 
position of the curve, and this can be determined directly from the 
equation for the curve. The program written for a Tandy TRS-80 
iS: 


19 CLS 

20 FOR J=44 TO 84 
30 SET, 24) 

40 NEXT J 

5@ FOR K=4 TO 44 
60 SET(64, K) 

70 NEXT K 

80 FOR I=—2@ TO 20 
90 H=64+I 
190 X=I/10 
110 Y=Xt3—3*X 
120 J=10* Y+24 
130 V=48—J 
140 SET(H, V) 
150 NEXT I 


Nearly all the content of this program is devoted to positioning, 
scaling and inverting the curve to be displayed; much less is 
devoted to actually finding the curve itself. This provides a first 
example of the way in which transformations such as shifting and 
scaling are widely used in graphics. 


Reduction 


Just as large characters can be composed in block graphics by 
using different individual characters as building blocks, so in pixel 
graphics a display made up of complete black and white character- 
sized blocks can be reduced in size to a display made up of the 
same pattern of pixels. A program to do this must first scan the 
screen to determine the pattern it contains, at the same time 
building up a representation of the reduced image before finally 
plotting the reduction. The program presented here will scan the 
rectangular area of the screen demarcated, in terms of character 
positions, by columns 10 and 33, and rows 3 and 14 as shown in 
Figure 4.5. The figure also shows, in terms of character positions, 
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Fig. 4.5. Screen layout showing original position of display and position of 
reduction. 


where the reduction is situated. A surround for the area to be re- 
duced (which will itself be reduced) can be drawn by: 


250 SM=15360 

260 FOR C=1@ TO 33 

270 POKE SM + 64*2 + C—1, 191 
280 POKE SM + 64*13 + C—1, 191 
299 NEXTC 

300 FOR R=3 TO 14 

310 POKE SM + 64*(R—1) + 9, 191 
320 POKE SM + 64*(R—1) + 32, 191 
330 NEXTR 

349 END 


When this area has been filled with some pattern of full-sized 
characters, the program that follows will generate a reduced 
version of the pattern. 


19 DIM C(12, 4) 

20 FOR I=3 TO 12 STEP 3 
30 N = INT(I/3) 

40 FOR J=19 TO 32 STEP 2 
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50 M=INT(J/2) — 4 

60 AD=SM +64*(I—1) + J—1 

719 PC=128 

80 FOR K=0TO 2 

90 FOR L=@ TO 1 

100 IF PEEK (AD + 64*K + L)=191 THEN PC=PC +21 
(L+2*K) 

110 NEXT L 

120 NEXT K 

13@ C(M,N)=PC 

149 NEXT J 

150 NEXTI 

160 REM DISPLAY REDUCTION 

170 FOR I=3 TO 6 

175 N=I-2 

180 FOR J=40 TO 51 

185 M=J—39 

190 POKE SM + 64*(I—1) + J—1, C(M.N) 

200 NEXT J 

210 NEXTI 


Movement 


The programming of movement on a pixel graphics system is much 
simpler than with block graphics. The production of a moving ball, 
say, represented by a pixel is produced by repetitions of the 
sequence: 


Plot the ball. 

Introduce a delay. 

Erase the ball. 

Change the position of the ball. 


RWN 


The ball is plotted by setting the pixel in the current position of 
the ball. The shorter the delay is made the quicker the ball will 
move. Erasure is just a matter of resetting the pixel. The locations 
of the pixels adjacent to a particular pixel are obtained by chang- 
ing the column position or the row position (or both) of the latter 
by one as shown in Figure 4.6. In this way, a single command 
corresponds to each essential step in the process of creating move- 
ment. With POINT it is straightforward to determine if the moving 
ball is about to meet an obstruction. The steps in making a ball 
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Fig. 4.6. A pixel and adjacent pixels. 


move horizontally across the screen bouncing of vertical walls 
at either side when it meets them are: 


Mm BWNHN 


6. 


Plot the ball. 

Introduce a delay. 

Erase the ball. 

Change the position of the ball. 

If there is an obstacle at the new position then reverse the 
direction of the ball and change its position. 

Go to step 1. 


A program for this is: 


19 FOR J=1 TO 126 

20 SET(J, 1): SET, 46) 

30 NEXT J 

40 FOR K=1 TO 46 

5@ SET(1, K): SET(126, K) 

60 NEXT K 

70 X=64 

80 Y=24 

99 C=1 

100 SET(X, Y) 

119 FOR I=1 TO 190: NEXT I 
120 RESET(X, Y) 

130 X=X+C 

149 IF POINT (X, Y)=—1 THEN C=—C: X=X+C 
15@ GOTO 100 


Note that lines 100 to 150 respectively correspond exactly to 
steps | to 6 given in the description of the procedure. 


Although this program illustrates the principles of creating 


movement and detecting obstacles to movement, the display it 
produces becomes boring rather quickly. However, it is just as 


Pixel Graphics 65 


easy to create movement in other directions, although the creation 
of the reflections that may occur when a ball strikes an obstacle 
obliquely needs some care, even if obstacles are restricted to being 
vertical or horizontal. The different situations that can occur when 
the movement is in a diagonal direction are illustrated by Figure 
4.7. Introducing an obstacle the position of which can be con- 
trolled (to represent, say, a bat) adds another dimension which can 
quickly transform a simple movement program to a quite sophisti- 
cated games program. 





Fig. 4.7. (a) Reflection from horizontal surface. (b) Reflection from vertical 
surface. (c) Reflection from corner. 


Summary 


Pixel graphic displays can be programmed in the same way as 
block graphics displays. However, it is much more convenient for 
the programmer to have facilities for dealing with an individual 
pixel, particularly for turning it on and off, and for examining 
it. Most pixel graphics systems possess commands for these things, 
usually with the names SET, RESET and POINT. When provided, 
they obviate the need in programs for the use of PEEK and 
POKE and any consequent relatively complicated manipulations 
with codes. Besides being more convenient for the programmer, 
pixel systems give higher resolutions than do block systems. 
Against them, it must be said that their displays tend to show 
less variety, being composed of pixels that are on or off, even 
though some systems can include letters and numbers with the 
graphics. 

The ways in which the facilities for manipulating a pixel can 
be programmed in BASIC are examined and a subroutine to 
provide them is presented. Then techniques for generating images 
of various kinds are given as well as programs for generating a 
reduced version of a display and for movement. 
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Suggested programming exercises 


1. 


Rewrite the program for generating a scaled down version 
of a display using SET and POINT rather than PEEK and 
POKE. 

Rewrite the program for the animated ‘Space Invader’ from 
Chapter 3 using SET and RESET rather than POKE. 

Amend the horizontal movement program to move a shape 
composed of several pixels rather than a single pixel. 

Modify the movement program to develop a ‘bat and ball’ 
game. A single player game could be made competitive by 
trying to prevent the ball from passing through a gap in the 
surround to the movement area. 

Find a teletext page containing graphics and reproduce it. 
Design a graphics page suitable to be used as a teletext 
greetings page on which suitable messages can be placed. 
(This might be comparable to a greetings telegram blank.) 
Write a program to display a domino. Generalise it so that 
when given the number of dots in each half of the domino 
it can display that domino. 


Chapter Five 
Line Graphics 


A line graphics system provides the user with what we have 
called a drawing head. It also provides, as a minimum, the capa- 
bilities to locate it at any dot on the display screen and to draw 
a line from one dot to any other on the screen. In this way every 
dot on the screen is readily accessible, and high-resolution dis- 
plays can be generated. The resolutions that are currently pro- 
vided by microcomputers are not comparable with the best 
ones available on mainframe computers, but in terms of the 
resolutions available with block and pixel graphics systems they 
certainly deserve the assignation of the term high-resolution. 

A dot is located by giving the column it occupies, with the 
columns numbered from left to right, and the row, with rows 
numbered from top to bottom. In this chapter, the names given 
to the two fundamental graphics commands are MOVE and 
DRAW, although the names given to the commands in the BASICs 
of microcomputers can vary considerably, as shown by the follow- 
ing Table 5.1. 


Table 5.1 Equivalent commands for various micros. 


Micro Equivalent of Equivalent of 
MOVE DRAW 
Apple HPLOT HPLOT TO 
Atari PLOT DRAWTO 
BBC Micro MOVE DRAW 
DAI DOT DRAW 


Tandy Color PSET DRAW 
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The way to draw a square is to move to one of its corners and 
then to draw each of its sides in succession. This gives the program 
as 


19 MOVE 49,40 
20 DRAW 50,49 
30 DRAW 50,50 
40 DRAW 40,59 
50 DRAW 40,49 


The simplicity of this example masks one major pitfall, which 
is that on many systems this program does not give a square at 
all, but rather produces a rectangle! This stems from the fact that 
the ratio of the width of a television screen to its height is always 
4 to 3. Therefore, unless in the rectangular array of dots provided 
by a line graphics system the ratio of the number of dots along a 
horizontal line (H) to the number of dots on a vertical line (V) 
is also 4 to 3, the dots will be more closely packed in one direc- 
tion than another making the spacing between adjacent dots 
different in the horizontal and vertical directions. 

On a system with a resolution of 256 X 192, the program will 
give a square because, since 


the dots are equally spaced in both directions. However, a system 
with a resolution of 280 X 192 will not display a square because 

H 280 4 

a 

V 192> <3 


Instead, it will show a rectangle that is higher than it is wide, 
because the dots are more closely packed horizontally than they 
are vertically. To counter this effect, a program to draw a square 
must include a compensation factor which on a system with a 
resolution of H X V is (H/V)*(3/4). A program to produce a 
genuine square on such a system is: 


19 MOVE 40,40 
20 DRAW 4@ + INT (10*(H/V)*@.75), 40 
30 DRAW 4@ + INT (10*(H/V)*@.75), 5@ 
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49 DRAW 49,50 
59 DRAW 40,40 


With microcomputer systems that give access to each dot with 
their graphics commands, the programmer must adjust the values 
to obtain the required effects at all times. A graphics system that 
performed these adjustments automatically would be of consider- 
able convenience, permitting the programmer to work in terms 
of his data values only with the computer automatically scaling 
them for display purposes. 

The program given above draws a square in an absolute, fixed 
position on the screen. It is often useful to be able to locate the 
square relative to another position rather than placing it in a fixed 
location. Indeed, some microcomputer BASICs include commands 
for moving and drawing relative to the most recent position of the 
‘drawing head’ rather than to absolutely specified positions. The 
following subroutine, using only the drawing commands MOVE 
and DRAW, will draw a square of side Z with its centre at the 
point X, Y thus providing the capability to draw a square of any 
size relative to a specified centre. 


1999 REM DRAW A SQUARE OF SIDE Z WITH CENTRE 
X,Y 

1919 U=INT ((Z/2)*(H/V)*@.75) 

1920 V=INT (Z/2) 

1930 MOVE X-U, Y—V 

1049 DRAW X+U, Y-V 

1050 DRAW X+U, Y+V 

1969 DRAW X-_U, Y+V 

1070 DRAW X-U, Y—V 

1980 RETURN 


More complex drawings 


Drawings that are much more complicated than a square, such 
as the space shuttle shown in Figure 5.1 can be produced by a 
simple data-driven program such as the following, which reads 
data to give the next position to which the ‘drawing head’ should 
move and also to indicate whether or not a line should be drawn 
at the same time. 


10 READX,Y,I 
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Fig. 5.7. Space shuttle. 


20 IF I=@ THEN STOP 

39 IF I=1 THEN MOVE X,Y 
49 IF I=2 THEN DRAW X,Y 
5@ GOTO 19 


In the DATA statements provided for this program the data must 
be given in groups of three. The first item in each triplet gives a 
column position and the second gives a row position. The third 
shows, according to whether it is 0, 1 or 2, whether the data is 
terminated or the drawing head should move to the next posi- 
tion, or whether a line should be drawn to the next position. 
The data statements to make this program give the same results 
as the first program in this chapter would be: 


69 DATA 40,40,1,50,40,2,50,50,2 
70 DATA 40,50,2,40,40,2,0,0,0 


With this program scheme, any figure whatever can be drawn if 
the appropriate data is provided. For a complex figure the amount 
of data will be considerable, and generating it, as well as entering 
it, becomes a daunting task. However, digitisers are now available 
for many microcomputers, including the Apple and Atari 
machines, and with these the data can be generated simply and 
automatically. Depending on how the accompanying software 
operates, the data will almost certainly be placed in a file (rather 
than in DATA statements) but the program scheme given above 
need only be amended in a straightforward way to accommodate 
this. 
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A digitiser consists essentially of a digitising surface or pad, and 
a stylus. In operation, the position of the stylus on the digitising 
surface can be sensed and the position communicated to the 
computer. Thus a graph or drawing placed on the digitising pad 
can be traced with the points on the drawing being transferred to 
the computer in a continuous stream, or individually when the 
stylus is actuated according to the user’s preference. The way in 
which the data transmitted from the digitiser to the computer is 
stored depends on the operation of the program run by the 
computer to handle the digitiser. 

Since the digitiser has been introduced as a graphics input 
device, it may be appropriate to mention at this point the graph 
plotter, which is a graphics output device, since graph plotters 
are becoming widely available for microcomputers. Thus drawings 
need not only be produced for temporary display on the screen, 
but can also be drawn in permanent form on a graph plotter. A 
completely interactive graphics system can therefore be based on 
a microcomputer, permitting information to be entered and re- 
covered in graphical form, with the micro and its associated soft- 
ware, Of course, used only to control the graphics devices. Such 
a system, with which all communication can be carried on in 
graphical form, can be of tremendous value in any kind of 
computer-aided design applications, in engineering design and in 
architectural planning. 


Movement 


The scheme by which movement can be achieved on a line 
graphics system is basically the same as that for any other system, 
that is: 


Draw the figure. 
Introduce a delay. 
Erase the figure. 


Establish a new position. 
Go to l. 


MB WN 


The way in which step 3 can be achieved varies in detail from 
machine to machine. It can always be done by clearing the screen, 
of course, but this may not always be satisfactory since certain 
elements of the display may need to be retained while others are 
moved. The essence of erasing a line is to draw it again but using 
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the same colour as the background when it is redrawn. In this way, 
what was a line becomes an indistinguishable part of the back- 
ground. To put this another way, a line is usually drawn as a 
bright trace on a dark background — that is by turning on the dots 
along the line while any others remain off. Drawing the line again, 
but this time in the background colour, returns all the dots 
marking the line to the colour of the background so that no trace 
of it remains. This gives the key to the way in which a line or a 
drawing can be erased on many systems, including those with 
colour displays. To be able to do this in the programs presented 
here, we introduce the command COLOUR, which sets the colour 
in which all lines are to be drawn until a subsequent COLOUR 
command changes it. 

A program to move a square around the screen on a pre- 
programmed path using the subroutine given above for drawing 
a square can now be written quite simply. It assumes that a dark 
background is available by default, and is listed below. 


19 X=128 : Y=96 : Z=10 

20 COLOUR=WHITE 

30 GOSUB 1099 

40 FOR I=1 TO 100 : NEXT I 
5@ COLOUR=BLACK 

60 GOSUB 1900 

70 READ X.Y 

80 GOTO 20 


The DATA statements must be included, giving the successive 
positions for the centre of the square. The program, as written, 
will end untidily when all the data has been read, but these 
matters can easily be attended to. In order to make the square 
follow a given curve the values of X and Y can be computed as the 
program proceeds by keeping a count of the number of times that 
the main loop of the program has been executed. This counter is 
used as an X-value to compute the corresponding Y-values from 
the equation of the curve. The program can also be simply 
modified to give other patterns. A steadily expanding square can 
be generated, for example, by keeping X and Y constant and 
steadily increasing Z each time the main loop is executed. 

Rather than amending the program in various ways to make it 
give different effects, it is preferable to have a single program 
which can move the square around the screen but at the same time 
draw it with any prescribed size and orientation. This brings us 
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back to a topic that has been mentioned before — transformations. 
The transformations that must be applied to the square to give 
the results that we want are shifting, magnification and rotation. 
By shifting the square it can be moved to any position, but with 
the same size and orientation. Magnification enables us to enlarge 
(or diminish) the square, but without changing its position (that 
is, the location of its centre) or orientation. Rotation permits 
the square to be rotated without altering its position or its size. 
These three transformations are the fundamental components of 
any change that is necessary to allow a square to be plotted with 
its inherent shape in any position, size and orientation. Some 
combination of the three will convert the square from one state 
to any other. Naturally, this discussion applies to any shape that 
we might have to deal with quite as well as to a square. 


Y e_ (x cos@ -y sin 8, 
x sin @+ y cos 8) 





ae x 


Fig. 5.2. Change in position of a point due to rotation. 


With a square specified by its centre and length of side, shifting 
can be achieved simply by changing the centre, and magnification 
by changing the length of the side. Thus the subroutine given 
above for plotting a square can already be used for realising these 
two transformations. It only remains to generalise the subroutine 
so that rotations can be performed, and to do this the subroutine 
must be able to plot the square in any orientation. Figure 5.2 
shows how an individual point is transformed when it is rotated 
through an angle, @, anticlockwise. This idea is incorporated into 
the subroutine so that the square can be rotated about its centre 
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by treating the points at each corner of the square in this way 
with respect to the centre of the square. 

The subroutine to plot a square in any situation given its 
centre, size and orientation is given below together with a program 
that calls it to draw a square after interactively accepting any of a 
range of commands to transform the square. The commands are 
given by a single key stroke, and the letters for the commands and 
the resultant effects are given below: 


The 


Command 


Opunzwmroucd 


Effect 


Shift upwards by 10 rows. 

Shift downwards by 10 rows. 
Shift to the left by 10 columns. 
Shift to the right by 10 columns. 
Magnify by 20%. 

Shrink by 20%. 

Rotate 18° anticlockwise. 
Rotate 18° clockwise. 


following program accepts these transformational 


commands interactively. It then causes the square to be drawn in 
the configuration that results from applying each transformation 
to the square in its previous state. 


X=128 : Y=96 : Z=10 : TH=0 

COLOU R=WHITE 

GOSUB 2000 

GET C$ : IF C$=“*” THEN 40 

COLOU R=BLACK 

GOSUB 2000 

IF C$=“‘U” THEN Y=Y — 19 : GOTO 20 
IF C$=“‘D” THEN Y=Y + 10 : GOTO 20 
IF C$=““L” THEN X=X — 190 : GOTO 20 


100 IF CS=“R” THEN X=X + 10 : GOTO 20 
119 IF CS=“M” THEN Z=Z* 1.2 : GOTO 29 
120 IF C$=“S” THEN Z=Z/1.2 : GOTO 29 


130 IF C$=““A” THEN TH=TH + 0.15708 : GOTO 29 
149 IF C$=“C” THEN TH=TH — 9.15708 : GOTO 20 


159 GOTO 20 
1690 END 
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2009 REM DRAW A SQUARE CENTRE X, Y 
2010 REM SIDE Z, ORIENTATION TH 
2029 U=(Z/2)*(H/V)*0.75 

20390 V=Z/2 

2049 UC=U*COS(TH) : US=U*SIN(TH) 
2059 VC=V*COS(TH) : VS=V*SIN(TH) 
2060 MOVE X — UC + VS, Y — US — VC 
2070 DRAW X + UC + VS, Y + US — VC 
2080 DRAW X + UC — VS, Y + US + VC 
2099 DRAW X — UC — VS, Y — US + VC 
2199 DRAW X — UC + VS, Y — US — VC 
2119 RETURN 


This program can readily be converted to a data-driven program 
or to a program that computes the necessary data to generate 
some prescribed pattern of transformations as it is executed. 
Omitting lines 50 and 60 causes the program not to erase each 
square so that the path of all the transformations from some 
initial square to the final one is displayed. It is difficult to generate 
the movement sufficiently rapidly to give convincing animated 
effects when using the standard BASIC graphics commands, no 
matter how the movement may be produced. It is worth men- 
tioning that the Apple has a special way of handling high- 
resolution shapes, and that realistic animation can be achieved on 
it using its shape tables and commands for transformations. 

Once these transformations can be effected the description 
of a shape, such as the one used to produce Figure 5.1 can be 
transformed again and again to produce sequences such as the 
space shuttle sequence illustrated in Figure 5.3. Transformations 
are an invaluable aid in many design problems and in situations 
where a complicated shape needs to be visualised. This is par- 
ticularly true when working in three dimensions as, for example, 
do architects designing buildings and research chemists examining 
crystalline structures. In circumstances such as these transforming 
an object permits views of it to be obtained from any angle, and 
this improves markedly the appreciation and understanding of the 
shape that can be obtained. 


Curves 


Continuous curves of any kind can be drawn on a line graphics 
system. They can be used in numerous applications ranging from 
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Fig. 5.3. Space shuttle sequence. 


their fundamental use in plotting graphs to the presentation of 
results in forecasting or simulation to the production of lively 
and realistic displays for an adventure game. 

Although some micros have commands for drawing circles and 
arcs, we have at our disposal only a facility for drawing straight 
lines. Consequently, when a curve is drawn it must be approx- 
imated by a series of straight line segments. The shorter these 
segments are, the more realistic the approximation to the curve 
becomes, and the limit to which this can be taken is determined 
by the resolution of the display screen. With any system pro- 
viding high-resolution graphics capability convincing curves can 
be drawn by joining dots in adjacent screen columns as long as 
their vertical separation is not too great. This provides a basic 
scheme for plotting curves, but leaves us with the problem of 
deciding how to display a particular curve to best effect on the 
screen. This is essentially the problem of scaling; that is, of magni- 
fying or diminishing the curve in such a way that it fits on the 
screen in the desired way. 
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This can best be illustrated by an example, so let us take the 
case of drawing two cycles of a damped cosine wave on a screen 
with a resolution of 256 by 192. This will subsequently be general- 
ised for screens of any resolution. With a damped wave, the size 
of the oscillations decreases as the waveform proceeds. The 
equation of the curve we shall plot a part of is: 


Y=COS(X)* EXP(—X/8) 


for values of X from 0 to 47. To plot this curve across the screen 
with full resolution, we start with a dot in the first column, on 
the left of the screen, and repeatedly draw a line to the appro- 
priate dot in the next column, doing this 255 times until the right 
hand side of the screen has been reached. To make X increase 
from O to 47 in this pattern, it must be repeatedly increased by 
increments of 47/255. In this way the kernel of the program is: 


I=Q : X=@ : Y=COS(X)* EXP(—X/8) 
MOVEI, Y 

FOR I=1 TO 255 

X=]*(4*PI/255) 

Y=COS(X)* EXP(—X/8) 

DRAWI, Y 

NEXT I 


Here, the variable I is used to count the column positions. It 
starts from zero because most micros count screen columns (and 
rows) starting from zero rather than from one, so that with the 
present resolution columns are usually numbered from O to 
255 rather than from 1 to 256. 

The scheme given above takes care of the horizontal scaling, 
but the vertical scaling still needs to be attended to. The curve 
is displayed effectively with the X-axis across the middle of the 
screen, which corresponds to row 95, and in this case we can 
afford to assign 90 dots vertically to the full amplitude of the 
cosine wave. This gives the final, complete program as: 


19 PI=3.141593 : S=4*PI/255 

20 I=0 : X=I*S : Y=95 + 90*COS(X)*EXP(—X/8) 
30 MOVEI, Y 

40 FOR I=1 TO 255 

50 X=I*S 

60 Y=95 + 99*COS(X)*EXP(—X/8) 

70 DRAW I, Y 
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80 NEXT I 
99 END 


The curve produced by this program is illustrated in Figure 5.4, 
together with two axes to show its positioning. Varying the 
numbers in lines 20 and 60 will help in giving a feeling for how the 
scaling, positioning and damping are achieved. To generalise the 
program it is necessary to know the resolution of the system that 
is used: the following program positions the plot in the same way 
as the previous program once the resolution is entered. 


Fig. 5.4. Damped cosine wave. 


19 PRINT “ENTER RESOLUTION. FIRST H, THEN V.” 
20 INPUT H, V 

30 PI=3.141593 : S=4*PI/(H — 1) 

49 D=INT(V/2) — 1: E=D—5 

50 I=0: X=I*S : Y=D + E*COS(X)*EXP(—X/8) 
60 MOVEI,Y 

70 FORI=1TOH-1 

80 X=I*S 

99 Y=D + E*COS(X)*EXP(—X/8) 

100 DRAWI, Y 

110 NEXT I 

120 END 


It may be noted here that a system which performed the scaling 
automatically would be much more convenient to use, since in 
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the two programs above it would be much more natural to use 
MOVE X, Y and DRAW X, Y than to work with the scaled 
variable I which necessitates the use of the commands MOVE I, Y 
and DRAW I, Y. 


(r,8) or (x,y) 





fo) 


od 
REFERENCE REFERENCE DIRECTION 
POINT 6=0 


Fig. 5.5. Polar coordinates. 


The programs given above provide a framework for drawing any 
curve simply by ‘plugging in’ its equation and attending to its 
scaling. The only proviso is that the equation must be expressed 
in terms of X and Y, that is to say, in mathematical terminology, 
that the equation uses X-Y coordinates. In fact, the location of 
a point can be described in many ways other than by giving its 
row and column positions. One of the alternative ways of fixing 
the position of a point is by using a fixed reference point and a 
fixed reference direction, and to say that the point is at a distance 
r from the reference point and that the line from the reference 
point to the point in question makes an angle, @, with the refer- 
ence direction. This is illustrated in Figure 5.5. This scheme for 
locating the position of a point is known as polar coordinates, 
and the position of a point is indicated by writing its distance and 
angle as (7, 6). The reason for introducing polar coordinates is 
that some interesting and unusual curves can be described very 
simply with their use. The equation for the spiral shown in Figure 
5 .6(a) is: 


r=0@ 


while that of the heart-shaped curve (a limagon) in Figure 5.6(b) 
iS: 
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(b) 
Fig. 5.6. (a) Spiral. (b) Limagon. 


r=1+cos@ 


Other, perhaps more familiar, curves can also be expressed very 
simply. For example: 


r=3 
gives a circle, while 
r=4/(2 + cos@) 


gives an ellipse. 

To plot a curve whose equation is given in polar coordinates it 
is, of course, necessary to convert from polar coordinates to X-Y 
coordinates. Reference to Figure 5.5 shows that they are related 
by 


X =rcos@ 
Y =rsin @ 


Using this, the program to plot the spiral in Figure 5.6(a), suitably 
positioned and scaled, is: 


19 PRINT “ENTER RESOLUTION. FIRST H, THEN V” 
20 INPUT H, V 

30 PI=3.141593 : S=PI/50 

40 TH=0 : R=TH : R=10*R 

5@ X1=INT (H/2) :Y1=INT (V/2) 

69 X=X1+R*COS(TH) : Y=Y1 + R*SIN(TH) 

70 MOVEX,Y 

99 FOR I=1 TO 100 

100 TH=I*S 
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119 R=TH : R=10*R 

120 X=X1 + R*COS(TH) : Y=Y1 + R*SIN(TH) 
130 DRAW X, Y 

149 NEXT I 

150 END 


Any other curve whose equation is given in polar coordinates 
can be plotted with this program by putting its equation in lines 
40 and 110 instead of that for the spiral. 


Fig. 5.7. Spiral and magnifications. 


In some cases a particular effect that may be desired can be 
obtained by making small variations to the shape of a curve. 
Various ways in which the shapes of curves can be modulated 
simply by amending the equations for the curve are illustrated 
below. Magnification is illustrated by Figure 5.7, where the spiral 


r=6 

is plotted with those given by 
r=26 

and 


r=40@ 
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Fig. 5.8. Rippling spirals. 


Figure 5.8 shows how a ripple can be added to a spiral. The 
equations of the plotted curves are: 


r= 6(1+ %cos20@) 
r= 6(1+% cos4é@) 
r= 6@(1 + 6 cos8@) 


Fig. 5.9. Limacon and one set of variations. 


Fig. 5.10. Limacon and second set of variations. 
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The size and frequency of the ripples on these rippling spirals are 
controlled by the bracketed modulating terms in their equations. 
The limagon: 

r=1+cosé, 
is plotted again in Figure 5.9 with 

r=1+’%cosé 
and 

r=1+%cosé 
which show a variation which tends to remove the highly distinc- 
tive ‘dimple’. In Figure 5.10 the distinctive feature is emphasised 
by making it recur. In this figure the equations of the plotted 
curves are 

r=1+cos@ 

r=1+cos20 

r=1+cos46 

These illustrations and some experimentation should give a 

good feeling for how a curve can be varied to any desired related 
shape simply by adjusting the equation of the basic curve. Once 
obtained, the equation can be placed in the general plotting pro- 
gram to view the results. 


Three dimensions 


Any graphics programmer who deals with actual events and scenes 
has to face the problem of how to represent the real three- 
dimensional world on a flat, two-dimensional display screen. The 
eyes and brains of every person have to cope with a similar prob- 
lem because we all see the world via flat images of it on the retinas 
of our eyes. The way in which three-dimensional objects could be 
realistically represented on a flat surface was discovered by the 
artists of the Renaissance in the fifteenth century. 

The underlying idea in producing perspective drawings is that 
the cone of rays of light reflected to the eye from an object 
becomes narrower the further the object is from the eye. This 
explains why objects that are further from the eye appear to be 
smaller than closer ones. Art students are taught to deal with 
perspective by introducing a ‘vanishing point’ on the horizon at 
which the parallel sides of a straight road converge in their per- 
spective representation. The straight sides of roads and buildings 
can then be dealt with easily, although winding roads are more 
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Fig. 5.17. Perspective view of a point. 


difficult. One of the set pieces used for teaching perspective during 
the Renaissance was to draw a chalice, and a famous perspective 
representation of a chalice by Uccello which is in the Uffizi 
Gallery in Florence bears a startling resemblance to the most 
modern computer-generated images. 

The idea of perspective naturally leads to a way of representing 
solid objects on a flat surface. If we take a point, P, on the solid 
object, we can specify the position from which it is being observed 
and the position of the flat surface on which it is to be repre- 
sented as shown in Figure 5.11. The position of the point, P, can 
be specified using three coordinates (x, y, z). It is being viewed 
from the origin of the coordinate system, that is, the point with 
coordinates (0, 0, 0). The plane on which the object is to be 
represented is parallel to the X-Y plane at a distance d from it. 
This plane is Known as the ‘picture plane’. From the figure it 
can be seen that the point P with coordinates (x, y, z) corres- 
ponds to the point (X, Y) in the picture plane, where 


X = x*(d/z) 
Y =y*(d/z) 


In this way X and Y are the transformed coordinates in the 
picture plane obtained as a result of the perspective transforma- 
tion. The point X = 0, Y = O is where the z-axis intersects the 
picture plane. The perspective transformation provides the basis 
for drawing any three-dimensional object, but it should be 
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emphasised that the viewpoint is fixed, and that the simplicity 
of the formulae for the perspective transformation depends on 
this. With similar reasoning to that used above, formulae for the 
perspective transformation from any viewpoint can be obtained, 
but their generality ensures that they are a good deal more com- 
plicated than those given above. 

Using this perspective transformation three-dimensional objects 
with straight edges can be drawn — a cube for instance, as well as 
three-dimensional curves such as a helix, and surfaces. 

A representation of a cube can be drawn by giving the position 
of each corner in three dimensions, transforming it to a point in 
the picture plane and then joining the points with straight lines 
as appropriate. The following program reads the coordinates of 
each corner in turn together with an indication of whether there 
is an edge to it from the previous corner. It then transforms the 
point and either draws a line to the transformed point or moves 
to it as appropriate. The display screen is naturally part of the 
picture plane corresponding to points whose x, y and z coordin- 
ates are all positive. The values chosen for x, y and z should there- 
fore be positive and as large as is consistent with providing a 
sizeable image without making it too large to fit on the screen. 
The image of a cube shown in Figure 5.12 was generated by the 
program listed below. 


owl 
ker 


Fig 5.12. Cube. 


19 FOR I=1 TO 16 

20 READX,Y,Z,C 

30 GOSUB 1000 

40 IF C=1 THEN DRAW XT, YT 
5@ IF C=@ THEN MOVE XT, YT 
60 NEXTI 
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70 DATA 10,290,40,0,10,20,90,1,60,20,90,1 ,60,20,40,1 
89 DATA 10,20,40,1,10,70,40,1,10,70,90,1,60,70,90,1 
99 DATA 60,70,40,1,19,70,49,1,10,20,990,0,10,70,90,1 
1099 DATA 69,20,90,0,60,70,90,1 ,60,20,40,0,60,70,40,1 
119 END 

1999 REM PERSPECTIVE TRANSFORMATION 

1910 D=19 

1920 XT=X*(D/Z) : YT=Y*(D/Z) 

19390 RETURN 


A surface is represented mathematically by an equation such as: 
Z= x’ —y’ 


or, more generally, by any equation that gives z in terms of x and 
y. To see that such an equation represents a surface, consider the 
x-y plane as a horizontal plane, and then for every point (x, y) 
in this plane the equation gives the height, z, of the surface above 
the plane. For example, at the point (2,1) the height of the 
surface above the x-y plane is given by: 


z=2°—1°=3 


A surface can be displayed as a perspective view of a ‘wire-frame’ 
model obtained by taking a rectangular grid in the x-y plane, 
calculating the height z of the surface above each cross-point of 
the grid and then joining these surface points. A part of the 
surface 


Z=x’—y’ 
drawn in this way is shown in Figure 5.13. A three-dimensional 
curve is obtained at the intersection of two surfaces, and so it 
can be represented mathematically by the equations of a pair of 
surfaces, since any point lying on the two surfaces at the same 
time must lie on the curve in which they intersect. A helix is one 


example of a three-dimensional curve and the pair of equations 
for it are: 


X =COSZ 
y =sin Z 
Part of this helix is displayed in Figure 5.14 from several points 


of view. Any one of these views can be generated by a program of 
the following form: 


19 PI=3.141593 : S=4*PI/100 
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Fig. 5.713. Saddle-shaped surface. 


Fig. 5.14. Different views of a helix. 
20 Z=1 
39 X=COS(Z) : Y=SIN(Z) 
40 GOSUB 1000 


5Q@ MOVE XT, YT 
69 FORI=1 TO 100 
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70 = =Z=1+I*S 

89 X=COS(Z) : Y=SIN(Z) 

99 GOSUB 1000 

190 DRAW XT, YT 

119 NEXTI 

120 END 

1990 REM PERSPECTIVE TRANSFORMATION 
1019 D=10 

19020 XT=X*(D/Z) : YT=Y*(D/Z) 

1939 RETURN 


Summary 


With line graphics, any image can be drawn using the commands 
for drawing with and moving the drawing head. A wide range of 
image production techniques is presented. Included in it are 
techniques for moving and transforming images, for designing 
and drawing curves, and for generating perspective views of three- 
dimensional objects. The only graphics commands used in this 
chapter, and with which all the techniques are implemented, are 
MOVE, DRAW and COLOUR. All micros with line graphics 
capability possess more graphics commands than this and, depend- 
ing on precisely what the commands are, they can make the 
implementation of a particular technique more convenient for 
the programmer. However, these few commands are all that are 
essential in many cases. No command for setting the high- 
resolution graphics mode, rather than the mode in which letters 
and numbers are displayed, has been used in this chapter. All 
graphics programs start with such a command in practice, the 
command itself being typically HGR, GCLEAR or something 
similar. It is implicitly assumed here that the first graphics state- 
ment to be executed in any program sets the high-resolution 
graphics mode. 

The use of digitiser is introduced as a way of entering complex 
images for display. A digitiser is a graphics input device, and the 
corresponding graphics output device is a graph plotter. Since 
these graphics peripherals are readily available for micros, it is 
possible to use a micro as the basis of an interactive graphics 
system with which all communication is carried out by graphic 
means. 

To many people the display and manipulation of three- 
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dimensional objects is the most fascinating and attractive use 
of graphics. The simple perspective transformation presented 
in this chapter provides a comparatively simple entry to the 
world of three-dimensional graphics. 


Suggested programming exercises 


1. 


Write programs to display the following, making sure that 
they have their true shapes when they are displayed: 

(a) An isosceles triangle. 

(b) A regular hexagon. 

(c) Acircle. 

Amend the movement and transformation program so that 
an aeroplane, rather than a square, can be moved around the 
screen. 

A point in the X-Y plane can be transformed in various ways. 
The transformations are represented as follows: 

A — no change. 

B — reflect the point in the origin. 

C — rotate 90° clockwise about the origin. 

D — rotate 90° anticlockwise about the origin. 

Complete the following table, where typically the entry in 
the row labelled C and the column labelled D gives the result 
of applying transformation D followed by transformation C 
to a point. Since a rotation of 90° anticlockwise followed by 
a rotation of 90° clockwise gives a net result of no change, 
this entry in the table should be A. 


A B C D 


GOO W LS 


Use the ideas for curve control given in the chapter section 
Curves to obtain the equation for, and then to plot, ‘rippling 
circles’ and ‘rippling ellipses’. 

Generate the data necessary to use the program of this 
chapter to give perspective views of: 
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(a) A tetrahedron. 
(b) A section of a girder with an H-shaped cross-section. 
(c) A chair. 

6. Write a program to generate ‘wire frame’ style surfaces such 
as the one in Figure 5.13. 

7. Make the necessary changes to the program giving a perspec- 
tive view of a cube to make sure that one unit is assigned the 
same length on the screen in both horizontal and vertical 


directions. 


Chapter Six 
Further Topics 


Turtle graphics 


So-called turtle graphics are incorporated in many languages for 
microcomputers ranging from Apple Pascal to Atari Pilot. They 
give an alternative system of commands for generating pictures 
and drawings. The Turtle in question is a small wheeled device 
which can be attached to a micro and controlled by it using 
commands expressed in ‘turtle graphics’ such as FORWARD 
and TURN. The Turtle has a pen attached to its underside which 
can be raised or lowered. In this way, when the Turtle is placed on 
a large sheet of paper, it can draw a line as it moves when the pen 
is lowered, hence the term ‘turtle graphics’. However, it is not 
essential to possess a Turtle to’ generate graphics in this way, since 
most systems have a facility for.simulating a Turtle on their 
screens. This is done in a way rather similar to that in which the 
‘drawing head’ is provided in the interactive drawing program of 
Chapter 3. With the screen turtle, it is possible to create graphics 
on the screen of a micro using the turtle graphics commands. 

In some ways the commands of turtle graphics are a much 
more natural way of describing the process of creating a picture 
than are MOVE and DRAW. The meaning of, for example, DRAW 
50,50 is not at all apparent at a cursory inspection since where 
drawing should start, and where it should finish, require a certain 
amount of knowledge about both previous commands and the 
layout of the screen. The action to be taken in response to the 
command FORWARD 20 is, by contrast, quite obvious, although 
a knowledge of the size of the units is needed to make the mean- 
ing completely clear. In fact, by following commands to advance, 
turn, and raise or lower a pen, a person can generate a drawing in 
exactly the same way as a Turtle can when it follows commands 
issued to it by a computer. This makes it easy for people to relate 
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to turtle graphics and therefore makes them correspondingly 
better disposed towards it. 

Turtle graphics systems and their commands are in fact based 
on the programming language LOGO, which is itself available 
for a number of microcomputers and has found application in 
areas ranging from artificial intelligence to introducing the con- 
cepts of mathematics and programming to children in an enter- 
taining way. Because different turtle graphics systems use different 
versions of the LOGO commands, we shall make reference to the 
commands as provided by LOGO itself. The basic graphics com- 
mands, with their meanings, are as listed below in Table 6.1. 


Table 6.1 Basic graphics commands in LOGO. 
Command Meaning 


FORWARD _ Move forward (that is, in the direction in which 
the Turtle is facing) the prescribed number of 


steps. 
BACK Move back the prescribed number of steps. 
RIGHT Turn to the right (that is, clockwise as seen 
from above) the prescribed number of degrees. 
LEFT Turn to the left the prescribed number of 
degrees. 
PENUP Lift the pen up. 


PENDOWN Put the pen down. 


The assumptions implicit in the commands are that the Turtle 
occupies a position and faces in some direction at all times. The 
position can be changed using FORWARD and BACK, and the 
direction in which it faces can be altered by RIGHT and LEFT. 
After PENDOWN, the Turtle leaves a trace as it moves, but it 
does not do so after PENUP. In this way a square can be drawn 


by: 


PENDOWN 
FORWARD 590 
RIGHT 99 
FORWARD 50 
RIGHT 99 
FORWARD 59 
RIGHT 990 
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FORWARD 50 
RIGHT 99 


The last right turn is not essential, but has the considerable 
value of leaving the Turtle in the same state, that is, in the same 
position and facing in the same direction, after drawing the square 
that it had before it started. This makes it much easier to keep 
track of the Turtle’s movements when drawing the square is only 
one of many elements in a complex picture. After completing an 
element of a picture, the Turtle can be left in a known standard 
state rather than in some random state at which it happens to have 
done the minimum necessary to draw that element. It is then 
straightforward to direct it to the next element. Fortunately, the 
previous sequence of commands can be abbreviated to: 


PENDOWN 
REPEAT 4 [FORWARD 5@ RIGHT 99] 


It can also be made into the body of a procedure for drawing a 
square of any length of side, with the length denoted by SIDE, 
by defining the procedure SQUARE as 


TO SQUARE :SIDE 

PENDOWN 

REPEAT 4 [FORWARD :SIDE RIGHT 99] 
END 


When this procedure is defined, a square can be drawn by the 
simple command 


SQUARE 50 


It should also be mentioned that once the procedure for 
drawing a square is available, it can be used to draw a square in 
any position, orientation and size. This can be done by moving the 
Turtle to the required position, turning it to the appropriate head- 
ing and then drawing the square with the size that is desired. This 
should be compared with the way that the transformations are 
achieved in a line graphics system in Chapter 5. In particular, there 
is no need here for some quite complicated mathematics involving 
sines and cosines. 

Very short LOGO programs can give surprisingly involved 
patterns. To give two examples, Figure 6.1 — a star — can be 
generated by: 


REPEAT 9 [FORWARD 5@ RIGHT 169] 
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Fig. 6.7. Star. 


and after defining the procedure SPIRAL by: 


TO SPIRAL :SIDE :ANGLE 
IF :SIDE >50 THEN STOP 
FORWARD :SIDE 

RIGHT :ANGLE 

SPIRAL :SIDE + 5 :ANGLE 
END 


Figure 6.2 — a spiral — is produced by: 
SPIRAL 5 45 


The program to give Figure 6.1 is a particular case of a scheme 
that gives many interesting shapes. A general procedure can be 
expressed as: 


TO POLYGON :NUMBER :SIDE :ANGLE 
REPEAT :NUMBER [FORWARD :SIDE RIGHT :ANGLE] 
END 


Experimenting with different values in calls of this procedure 
gives many interesting shapes. As long as NUMBER is made large 
enough so that sufficient repetitions are done each figure will 
always link up to give a closed circuit. The procedure SPIRAL 
is recursive in that it calls itself: it is an example of a very power- 
ful technique that allows complex drawings to be generated by 
very short programs. 
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Fig. 6.2. Spiral. 


Dealing with three dimensions 


One important use of graphics is to present information in a way 
in which it can easily be understood. This is particularly true 
when the information needs to be presented using three dimen- 
sions. Numerical or verbal descriptions of three-dimensional 
shapes are unhelpful to most people but we all deal with three- 
dimensional information presented visually every day. To illus- 
trate this we shall present a table of numerical data which 
represents a three-dimensional situation (see Table 6.2) and then 
examine various ways of presenting this information graphically. 
Tabulated data of this kind arises in many applications and prob- 
lems, but the following data is presented as a table of heights 
measured at each cross-point of a rectangular grid used to cover 
an area of land when it was surveyed. The ideas and techniques 
illustrated here for the presentation of the data should, however, 
be applicable not only in this particular case but also in a wide 
range of similar situations. 

This data represents points on a surface, and the essential 
problem is to represent the surface in a comprehensible way. One 
way to do this is to show a series of cross-sections through the 
surface, and this is done in Figure 6.3 where the data in each 
row of the table is used to provide a curve. This presentation is 
somewhat cluttered, and although with some persistance a picture 
of the site can be built up, it is rather difficult to do because the 
order of the cross-sections from the front to the back of the site 
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HEIGHT 


18 


-fh 


Table 6.2 Table of heights. 


Row 


COND NN BW YN 





1 


2st 
3.0 
3.0 
22 
1.8 
1.7 
1.7 
1.6 


29 
3.6 
3.5 
2.5 
2.4 
ie 
2.6 
23 


3.1 
4.2 
4.4 
3.0 
3.0 
3.3 
4 
2.8 


Column 

4 5 

3.3 2.9 
4.6 3.5 
5.3 3.8 
3.5 3.8 
5.0 5.2 
5.1 6.2 
3.9 4.8 
3.4 3.6 


2.0 
2.4 
2.7 
3.8 
5.0 
7.4 
4.9 
3.8 


Fig. 6.3. Cross-sections of a surface. 


1.7 
2.0 
2.5 
3.4 
4.1 
5.4 
4.7 
4.0 


1.4 
1.8 
2:3 
2.9 
3.4 
4.6 
4.5 
4.2 
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Ol 


Fig. 6.4. Contour map of a surface. 


is difficult to fix. The information is presented rather more con- 
ventionally in Figure 6.4 as a contour map. This presentation 
improves on the cross-sectional approach by giving a representa- 
tion from which a feel for the shape of the whole site can be 
visualised, but its effectiveness relies on the fact that a contour 
map is a familiar stylised way in which to present information of 
this kind. This presentation still does not give a visual impression 
of the appearance of the region. The data is, of course, in an ideal 
format for presentation as a ‘wire-frame’ model of the kind intro- 
duced in Chapter 5, and Figure 6.5 gives a perspective view of the 
surface represented in this way. At last a visual presentation is 
arrived at which makes it easy to understand the data. The lines 
that would be hidden when the surface is viewed from the par- 
ticular viewpoint that is taken are removed. This enhances the 
presentation, but does mean that information about certain parts 
of the region is suppressed. This minor shortcoming can be over- 
come by producing two perspectives which use different viewpoints. 
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Fig. 6.5. ‘Wire-frame’ representation of a surface. 


Fig. 6.6. Three-dimensional contour map of a surface. 


Another way of presenting the data that is as informative as the 
‘wire-frame’ model is the perspective view of the three-dimensional 
contour map shown in Figure 6.6. An ideal presentation of the 
information might consist of various diagrams, some using one 
display method and some another. | 
This discussion is intended to show for a particular case what is 
true in general, namely that complicated data can be presented 
graphically in ways that make it easily understood, but that the 
selection of those ways is by no means easy. In any application 
the selection of the most suitable methods for presenting data 
needs to be carefully made to match it not only to the data but 
also to the audience for which it is intended. There can be no 
magic formula for doing this in general and a variety of methods 
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may have to be tried, accepting that some combination of them 
might prove to be most effective. The use of colour can be a great 
help, as can be imagined by referring to the two-dimensional con- 
tour map and visualising it as coloured as it would be in an atlas. 


Requirements of a microcomputer graphics package 


Line graphics systems are perhaps the most flexible, in application 
and in the kinds of images they can display, of the three types of 
graphics that are available on micros. As the cost of memory drops 
the general, although by no means universal, trend is for micros 
to provide high-resolution graphics. A number of the newer 
models still provide block graphics and, as we have seen, most 
effective displays can be generated using them. These systems, by 
providing the capability to handle groups of block graphics charac- 
ters as single entities which can be moved rapidly over the screen 
with collisions being automatically detected, have a facility that 
other types of system have not offered yet with which many 
applications, including games, can be simply programmed. The 
groups of characters are Known variously as sprites on the Texas 
Instruments TI 99/4A and MOBS, for movable object blocks, 
on the Commodore 64. Pixel graphics provides displays that are 
compatible with teletext graphics, making this system useful 
when personal computers are used to access teletext transmis- 
sions. Consequently, there are reasons for retaining block and 
pixel graphics, but these facilities are increasingly provided by 
microcomputers in addition to high-resolution graphics. 

We have seen that a considerable range of applications can be 
successfully programmed using no more graphics commands than 
MOVE, DRAW and COLOUR. The provision of more commands 
by a system makes for greater convenience in its use by the pro- 
grammer, but can lessen the challenge to the programmer to create 
his own graphic effects. On the other hand the creation from 
scratch of certain effects does require a certain amount of mathe- 
matical expertise and sophistication, and providing commands 
for dealing with them makes graphics programming accessible to 
a much greater range of users. The programmer who wants to do 
so can always implement the graphics commands himself, and may 
prefer to do so particularly if they are not provided in just the way 
that he prefers to use them. The complete lack of standardisation 
among the graphics facilities possessed by microcomputers that is 
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revealed in Appendix 1 prompts an examination of what a micro- 
computer graphics package should contain. 

If we assume that every system has its equivalents for the 
commands MOVE, DRAW and COLOUR, the discussions in 
Chapter 5 suggest that commands for movement and drawing rela- 
tive to the current position are useful, as well as a facility for 
erasing lines. These facilities could be provided by commands such 
as the following: 


Command Meaning 


MOVEBY X,Y Move the drawing head by X horizontally and Y 
vertically relative to its current position. 

DRAWBY X,Y Draw a line from the current position of the draw- 
ing head to the point X horizontally and Y 
vertically from it. 

ERASE X, Y Set the plotting colour to the current background 
colour before acting as DRAW X, Y. 


Particularly with colour displays, it is useful to be able to draw 
lines of any thickness rather than only one dot wide. This permits 
the simulation of brush strokes among many other applications. 
The capability could be provided by the commands: 


PAINT X,Y,T Draw a line with thickness T to the point 
X,Y. 

PAINTBY X,Y,T Draw a line with thickness T to a point 
X horizontally and Y vertically from the 
current position. 


On more than one occasion in Chapter 5 it was stressed that it 
would be convenient to create displays in terms of data values at 
all times rather than the locations of dots on the screen. The 
provision of a scaling command which permitted the data values 
corresponding to the extreme horizontal and vertical positions 
on the screen to be assigned could then allow the programmer to 
work in terms of data values which the system would auto- 
matically position on the screen in their appropriate place. The 
form of the command could be: 


SCALE X1,X2,Y1, Y2 Scale any display items so that the 
data value X1 is at the extreme 
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left, X2 at the extreme right, Y1 
at the bottom and Y2 at the top. 


With a scaling command of this kind available, all the commands 
for moving, drawing and painting can include actual data values 
rather than having to refer to screen positions directly. 

The topic that has called on more mathematics than any other 
in the previous chapters is transformations. Commands to facili- 
tate transformations would prove a great convenience and they 
could be provided in the following form. 


SHIFT X,Y Shift all subsequent drawings by X 
horizontally and Y vertically. 
MAGNIFY F Magnify all subsequent drawings by a 


factor F. Values of F greater than one 
give magnification while those less than 
One give a reduction. 

ROTATE A Rotate all subsequent drawings by an 
angle A. 


The perspective transformation can also be catered for, and the 
way in which it is provided needs careful consideration. If the 
viewpoint is fixed, as in the section on dealing with three dimen- 
sions in Chapter 5, the following commands would suffice: 


MOVE3D X,Y,Z Move the drawing head to the point in 
the picture plane (that is, on the screen) 
corresponding to the three-dimensional 
position (X,Y,Z). 

DRAW3D X,Y,Z Draw a line from the current point in the 
picture plane to the point corresponding 
to (X,Y,Z). 


Naturally, if a general viewpoint is to be used it becomes more 
complicated to deal with the perspective transformation since the 
actual viewpoint must be specified in some way. 

Among useful facilities that might be provided are drawing 
curves and filling regions with a specified colour. In many circum- 
stances it is necessary to draw a curve passing through a number 
of specified points. A command to cause a curve to be drawn 
through the points to the resolution provided by the screen would 
be preferable to one giving a set of linked straight line segments. 
It might be provided as: 


CURVE A,B,N Draw a smooth curve through the N 
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points whose X-positions are stored in 
the array A and whose Y-positions are 
in the array B. 


The ‘fill’ command is provided in a variety of ways by current 
microcomputers. In some cases a rectangular region is filled with 
a specified colour when two diagonally opposite corners of the 
region are given. This type of filling can be implemented with no 
particular difficulty. The following subroutine fills a rectangle 
with corners stored at X1,Y1 and X2,Y2 in any colour that is 
specified as the plotting colour before the subroutine is called: 


2009 REM SUBROUTINE TO FILL RECTANGLE 
2010 A=X1: B=X2: C=Y1: D=Y2 

2020 IF X1>X2 THEN A=X2: B=X1 

2030 IF Y1I>Y2 THEN C=Y2: D=Y1 

20490 FOR RO=C TO D 

2050 MOVE A,RO 

2069 DRAW B,RO 

2070 NEXT RO 

2080 RETURN 


A more useful command for filling any region would operate as 
follows 


FILL COLOUR Fill the closed curve inside which the 
drawing head had previously been 
placed with the colour COLOUR. 


Commands to make it easy to handle graphics peripherals 
including digitisers, light pens and graph plotters would be of 
great value in simplifying their use. However, given that the situa- 
tion regarding peripherals for microcomputers shows even fewer 
signs of standardisation than the microcomputer situation itself, 
this is almost certainly asking too much. 


Further reading 


This book provides an introduction to graphics programming for 
microcomputers employing the various graphics systems that are 
in use. It seems appropriate to give a guide to some further reading 
so that the reader can study further any topics from this book 
that interest him. It must, however, be said that there is a limited 
amount of literature available. 
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There is no general text dealing with block graphics, but PET 
Graphics by Nick Hampshire (Computabits, 1981) deals with a 
large number of methods for generating displays using block 
graphics. It is obviously specific to the PET, but it is not diffi- 
cult to translate any of the techniques to another machine unless 
they entirely depend on some peculiar quirk of the PET. 

I am aware of no book dealing with pixel graphics. 

For line graphics, Computer Graphics Primer by Mitchell 
Waite (Sams, 1979) contains some material. However, most of it 
is specific to the Apple, and the commands of that machine, 
powerful as they are, are somewhat idiosyncratic. Mathematical 
Elements for Computer Graphics by D.F. Rogers and J.A. Adams 
(McGraw-Hill, 1976) provides the material suggested by its title. 
It also includes BASIC subroutines for many applications, includ- 
ing three-dimensional drawing, transformations, curve drawing and 
surface representation. 

A fine treatment of ‘turtle graphics’ and its use as a medium for 
exploring programming and mathematics is given in Turtle Geo- 
metry by H. Abelson and A. diSessa (MIT Press, 1980). 

Two books intended for mainframe graphics are also of interest, 
as they include many ideas that can be adapted for microcom- 
puters. A Practical Introduction to Computer Graphics by I.O. 
Angell (Macmillan, 1981) covers many important and useful 
graphics programming techniques. The programs are written in 
FORTRAN and use a particular library of graphics commands, 
but can be translated to BASIC and microcomputer graphics 
commands with a little effort in almost all cases. Fundamentals 
of Interactive Computer Graphics by J.D. Foley and A. van Dam 
(Addison-Wesley, 1982) provides an up to date account of inter- 
active graphics on mainframe computers, a good deal of which is 
relevant to microcomputer graphics. 


Appendix 1 
The Graphics Facilities of 
Microcomputers 





In this appendix a survey is given of the graphics facilities available 
on the more popular personal computers. The system used to 
classify the graphics facilities of each microcomputer indicates 
the type, the highest resolution available and its screen format 
as well as the size and location of the graphics memory. Each 
machine is classified in its basic, unexpanded configuration. The 
type of graphics is classified first as monochrome or colour, and 
secondly as line, pixel or block. If a system provides more than 
one of line, pixel and block graphics, then the system providing 
the highest resolution is recorded, so that line takes priority over 
pixel and block, and pixel takes precedence over block. Under 
‘resolution’ only the highest resolution is indicated, since micro- 
computers can provide as many as 12 different graphics modes 
with most of them giving different resolutions. The ‘screen format’ 
shows how the rows and columns on the screen are numbered, 
and where the screen origin is located. The ‘memory required’ 
entry shows how much memory is taken up by the screen display 
in the highest resolution mode. ‘Address range’ shows just where 
that memory is by indicating the addresses of the locations making 
up the screen memory. The final entry lists the graphics 
commands that are provided. 

Some remarks are included with each entry. They are basically 
used to explain the effects of the graphics commands, but they 
may also explain any points about a particular classification that 
may require clarification. This clarification is often necessary 
because even with such a simple categorisation as is attempted 
here there is at least one microcomputer which defies straight- 
forward classification under every heading. The remarks section is 
also used to indicate matters such as which micros have graphics 
peripherals readily available and, occasionally, that a microcomputer 
lacks some facility that it might have been expected to possess. 
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Acorn Atom 


Ty pe of graphics: 
Monochrome. 
Line. 

Resolution: 
256 X 192. 

Screen format: 
Columns 0 to 255, rows 0 to 191, cell (0,0) at bottom left. 

Memory required: 
6K. 

Address range: 
32768 to 38911. 

Commands: 
CLEAR, PLOT, MOVE, DRAW. 

Remarks: 
The Atom has nine graphics modes selected by using CLEAR. 
The highest resolution can only be obtained if the full memory 
complement of 12K of RAM and 12K of ROM is installed. 
MOVE and DRAW operate as we would expect. The PLOT 
command has 16 different forms which permit, amongst other 
things absolute moving and drawing (corresponding to MOVE 
and DRAW), relative moving and drawing, and erasing. Pixel 
graphics are also provided using a 2 X 3 mosaic. Colour is 
available as an extra, when the highest resolution available is 
128 X 192 employing four colours. 


Apple II 


Ty pe of graphics: 
Colour. 
Line. 
Resolution: 
280 X 192. 
Screen format: 
Columns 0 to 279, rows 0 to 191, cell (0,0) at top left. 
Memory required: 
SK. 
Address range: 
16348 to 24575. 
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Commands: 
HGR, HGR2, HCOLOR, HPLOT. 
For mobile graphics: SHLOAD, DRAW, XDRAW, ROT, 
SCALE. 

Remarks: 
The highest resolution is selected by HGR2. With HGR a resolu- 
tion of 280 X 160 is obtained with space for four lines of text 
below the graphics area. HCOLOR is used to select one of eight 
colours for plotting. HPLOT can be used to plot a point 
(HPLOT 10, 20), a line (HPLOT 10,20 TO 30,30) or linked line 
segments (HPLOT 10,20 TO 30,30 TO 40,40). The special 
commands for mobile graphics permit a shape, represented in a 
special way, to be loaded from tape (SHLOAD), drawn 
(DRAW), erased (XDRAW) and rotated (ROT) and scaled 
(SCALE) before it is drawn again. The Apple Graphics Tablet 
consists of a stylus and an 11 inch square digitising surface. 
Turtle graphics are incorporated in Apple Pascal: the graphics 
commands provided are PENCOLOR, TURN, TURNTO and 
MOVE. 


Atari 400 and 800 


Ty pe of graphics: 
Colour. 
Line. 

Resolution: 
320 X 192. 

Screen format: 
Columns 0 to 319, rows 0 to 191, cell (0,0) at top left. 

Memory required: 
SK. 

Address range: 
Memory is scattered and its location depends on the configur- 
ation in use. 

Commands: 
GRAPHICS, SETCOLOR, COLOR, POSITION, PLOT, 
DRAWTO, X10. 

Remarks: 
There are nine graphics modes selected by GRAPHICS: some 
give a four line text window below the plotting area. SET- 
COLOR is used to select the colour and intensity of the 
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background, and to change the plotting colour. COLOR selects 
the plotting colour. A shape can be filled with a specified colour 
using XIO. The plotting and background colours can each be 
chosen from 16 colours and 16 intensities. The Versawriter 
is a digitiser with an active surface area of 8 X 12% inches. 
Turtle graphics is incorporated in Atari Pilot, providing the 
commands TURN and DRAW. 


BBC Microcomputer 


Type of graphics: 
Colour. 
Line. 

Resolution: 
320 X 256 (model A). 
640 X 256 (model B). 

Screen format: 
Columns 0 to 319 (Model A) and O to 639 (Model B), rows 
0 to 255, cell (0,0) at top left. 

Memory required: 
10K (Model A). 
20K (Model B). 

Address range: 
22528 to 32767 (Model A). 
12288 to 32767 (Model B). 

Commands: 
CLG, GCOL, MODE, POINT, PLOT, MOVE, DRAW. 

Remarks: 
Graphics modes are selected using MODE: the Model A has 
four and the Model B has eight. 16 colours can be used, but 
only two of them at the same time in the highest resolution 
modes. CLG clears the graphics screen, GCOL selects the back- 
ground and plotting colours and POINT can determine the 
colour at any point on the screen. PLOT permits absolute 
and relative movement and drawing, with MOVE and DRAW 
corresponding to particular cases, as well as allowing dashed 
lines. It also permits filled triangles to be plotted, the signifi- 
cance of which is that triangles can be used to construct models 
of solid objects. 
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Commodore PET 


Type of graphics: 
Monochrome. 
Block. 

Resolution: 
80 X S50. 

Screen format: 
25 rows of 40 characters. 

Memory required: 
1K. 

Address range: | 
32768 to 33767. 

Commands: 
None. 

Remarks: 
The PET’s block graphics characters are the original set on 
which those of most other block graphics systems are more 
or less closely based. The repertoire of graphics characters 
includes a complete set of 2 X 2 mosaic pixel characters which 
give the maximum resolution of 80 X 50. The character dot 
matrix is 8 X 8 so that the dot resolution is 320 X 200 and this 
resolution can be accessed in limited ways by pseudo high- 
resolution displays using specially chosen sub-sets of the 
graphics characters. 


Commodore VIC 20 


Type of graphics: 
Colour. 
Block. 
Resolution: 
44 X 46. 
Screen format: 
23 rows of 22 characters. 
Memory required: 
1K. 
Address range: 
7680 to 8185 and 38400 to 38905. 
Commands: 
When extra high-resolution cartridge is fitted: PAINT, POINT, 
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DRAW, COLOUR, CIRCLE, REGION. 
Remarks: 

The VIC has the same block graphics capability as the PET, but 
with colour. The memory area between addresses 7680 to 
8185 holds the codes for the displayed characters and the other 
part holds the colour information. Characters can be in any of 
eight colours, their background any of 16 and the border 
surrounding the plotting area any of eight. With the high- 
resolution cartridge fitted a resolution of 176 X 158 is ob- 
tained. Joy-sticks, paddles and light pens are all available. 


DAI 


Type of graphics: 
Colour. 
Line. 
Resolution: 
336 X 256. 
Screen format: 
Columns 0 to 335, rows 0 to 255, cell (0,0) at bottom left. 
Memory required: 
23K. 
Address range: 
25600 to 49151. 
Commands: 
MODE, COLORT, COLORG, DOT, DRAW, FILL, SCRN. 
Remarks: 
Any of 12 graphics modes can be selected by MODE. Three 
different resolutions are available and a text window can be 
included with each. 16 different colours can be used in some 
modes, but only four of the 16 in others. COLORG sets the 
colours in a four-colour mode, COLORT selects background 
and plotting colours, DOT plots a point, DRAW draws a line 
and FILL fills a rectangle. Animation effects can be created 
using the ANIMATE facility. 


Exidy Sorcerer 


Type of graphics: 
Monochrome. 
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Block. 

Resolution: 
128 X 60. 

Screen format: 
30 rows of 64 characters. 

Memory required: 
2K. 

Address range: 
—3968 to —2058 (In hexadecimal FO80 to F7FF). 

Commands: 
None. 

Remarks: 
The Sorcerer supports 128 block graphics characters using an 
8 X 8 dot matrix. They can all be designed by the user although 
64 of them are set by default at switch-on. The default charac- 
ters include the quartered pixel graphics characters which gives 
the quoted maximum resolution, but it can be noted that the 
128 characters could be defined as the 2 X 3 pixel graphics 
characters to give a higher resolution, although no other charac- 
ters would then be available. 


Grundy NewBrain 


Type of graphics: 
Colour. 
Line. 

Resolution: 
640 X 250. 

Screen format: 
Columns 0 to 639, rows 0 to 249, cell (0,0) at bottom left. 

Commands: 
MOVE, MOVEBY, TURN, TURNBY, PLACE, BACK- 
GROUND, COLOUR, WIPE, DRAW, DRAWBY, DOT, 
CENTRE, FILL, RANGE, AXES, PEN. 

Remarks: 
Plotting commands are given as PLOT followed by a plotting 
list, for example, PLOT MOVEBY (10), TURNBY (45). With 
MOVE a line can be drawn (confusingly), DRAW draws a line 
in a specified colour and TURN alters the direction in which 
the drawing head faces (as in turtle graphics). MOVEBY, 
DRAWBY and TURNBY all operate similarly, but relative 
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to the current state. PLACE moves the drawing head and DOT 
marks a single point. COLOUR sets the plotting colour and 
BACKGROUND the background colour. The origin can be 
relocated with CENTRE, horizontal and vertical scaling are set 
with RANGE and two labelled axes can be drawn with AXES. 
PEN gives the position, orientation and other properties of the 
drawing head. 


NASCOM 


Type of graphics: 


Monochrome. 
Pixel. 


Resolution: 


96 X 48. 


Screen format: 


16 lines of 48 characters. 


Memory required: 


IK. 


Address range: 


2048 to 3071. 


Commands: 


CLS, SET, RESET, POINT. 


Remarks: 


Pixels on a 2 X 3 mosaic are provided, and although the 
NASCOM 2 and 3 models provide the commands listed above, 
the NASCOM 1 does not. CLS clears the screen, SET turns on 
a pixel and RESET turns one off. POINT determines if a pixel 
is on or off. An extra card can be added to the NASCOM 3 to 
give resolutions up to 800 X 256. 


NEC PC-8001 


Type of graphics: 


Colour. 
Line. 


Resolution: 


160 X 100. 


Screen format: 


See under Remarks. 


112 Programming with Graphics 


Memory required: 
3K. 

Address range: 
62208 to 65159. 

Commands: 
COLOR, LINE, PSET, PRESET, POINT, WIDTH. 

Remarks: 
The memory is mapped to rows of 120 characters of which up 
to 80 can be displayed. Up to 25 lines can be displayed. WIDTH 
is used to set the number of characters per row and the number 
of rows that are displayed. The system uses a 2 X 4 pixel 
mosaic, and this gives the maximum resolution. COLOR sets the 
plotting colour to one of eight colours, PSET turns a point on, 
PRESET turns it off and POINT examines a point. LINE has 
several uses including drawing a line between two points or 
filling a rectangle given two points at opposite corners. 


Research Machines 380Z 


Type of graphics: 
Monochrome. 
Block. 

Resolution: 
80 X 72. 

Screen format: 
24 rows of 40 characters. 

Memory required: 
1.7K. 

Address range: 
61440 to 62209. 

Commands: 
None. 

Remarks: 
The pixel graphics characters on a 2 X 3 mosaic are all pro- 
vided as well as 32 graphics characters. RML Extended BASIC 
includes the graphics commands GRAPH to give an 80 X 60 
graphics area with cell (0,0) at the bottom left and a four-line 
text window below it, PLOT to plot a point, LINE to draw a 
line and POINT to examine a point. An extra high-resolution 
graphics board gives coloured line graphics. The highest resolu- 
tion available with it is 320 X 192 using four colours. The 
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commands provided include the self-explanatory RESOLU- 
TION, CLEAR, PLOT, LINE and COLOUR. FILL fills a 
rectangle, and SETCOL sets colours for subsequent displays. 
The graphics package GINO-F is also available. 


Sharp MZ-80A and MZ-80K 


Type of graphics: 
Monochrome. 
Block. 

Resolution: 
80 X SO. 

Screen format: 
25 rows of 40 characters. 

Memory required: 
1K (MZ-80K). 
2K (MZ-80A). 

Address range: 
53248 to 54247 (MZ-80K). 
53248 to 55295 (MZ-80A). 

Commands: 
SET, RESET. 

Remarks: 
The block graphics characters are modelled on those of the 
PET, but with additions so that lines other than horizontal 
and vertical ones can be drawn, as well as curves and circuit 
diagrams with the aid of characters giving the symbols for 
capacitors and transistors. The complete set of quartered pixel 
characters is available. Any pixel can be turned on by SET or 
off by RESET. On the model A only, because of the extra 
screen memory, the screen display can be scrolled up and 
down. 


Sharp MZ-80B 


Type of graphics: 
Monochrome. 
Line. 

Resolution: 

320 X 200. 
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Screen format: 
Columns 0 to 329, rows 0 to 199, cell (0,0) at top left. 

Memory required: 
8K. 

Address range: 
57344 to 65535 or 24576 to 32767. 

Commands: 
GRAPH, SET, RESET, LINE, BLINE, POSITION, PATTERN, 
POINT, POSH, POSV. 

Remarks: 
The screen memoty is in a special area rather than in user RAM; 
it can be treated in the same way as ordinary RAM but, when 
it is, the addresses assigned to it depend on how the ordinary 
RAM is currently used. GRAPH not only selects the graphics 
mode but also assigns addresses to the screen memory as appro- 
priate. SET turns a point on and RESET turns one off. LINE 
draws a line or linked line segments and BLINE can erase them. 
POSITION moves the drawing head and PATTERN plots a 
specified pattern of dots. The screen is examined using POINT, 
POSH and POSV. A second screen memory can be added 
giving the capacity for animation by switching between the two 
displays. 


Sharp PC-1500 


Type of graphics: 
Monochrome. 
Block. 
Resolution: 
7X 156. 
Memory required: 
Input buffer. 
Screen format: 
One row of 26 characters. 
Commands: 
For one-line display: CLS, GPRINT, GCURSOR, POINT. 
For printer/plotter: CSIZE, ROTATE, COLOR, LF, LPRINT, 
LCURSOR, SORGN, GLCURSOR, LINE, RLINE. 
Remarks: 
The one-line display can show 26 characters each on a5 X 7 
dot matrix. CLS clears the display, GCURSOR positions the 
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cursor on any column, POINT examines any column and 
GPRINT permits any character to be defined and displayed. 
Adding the printer/plotter to the PC-1500 gives it the capability 
to draw four-colour plots using the ball-pens mounted in its 
pen-holder. With this plotter, COLOR selects the plotting 
colour, SORGN sets the origin, GLCURSOR positions the pen 
and LINE draws a line. RLINE gives relative drawing. When 
plotting characters, CSIZE gives their size, LCURSOR positions 
them and LPRINT draws them: they can be drawn in any of 
four orientations using ROTATE. 


Sinclair ZX Spectrum 


Type of graphics: 
Colour. 
Line. 

Resolution: 
256 X 176. 

Screen format: 
Columns 0 to 255, rows 0 to 175, cell (0,0) at bottom left. 

Memory required: 
6K. 

Address range: 
16348 to 22528. 

Commands: 
PLOT, DRAW, CIRCLE, POINT, INK, PAPER, FLASH, 
BRIGHT, INVERSE, OVER. 

Remarks: 
The display consists of 22 rows of 32 characters with each 
character consisting of an 8 X 8 array of pixels. INK and 
PAPER respectively give the plotting and background colours, 
both of which can be any of eight. BRIGHT selects between 
two levels of brightness, FLASH can make parts of the screen 
flash, INVERSE exchanges the background and plotting 
colours, and OVER permits over-printing. PLOT plots a point, 
DRAW draws lines, arcs and circles, and CIRCLE draws a circle 
given its centre and radius. 
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Type of graphics: 
Monochrome. 
Pixel. 

Resolution: 
64 X 44. 

Screen format: 
Columns 0 to 63, rows O to 43, cell (0,0) at bottom left. 

Memory required: 
Up to 0.8K. 

Commands: 
PLOT, UNPLOT. 

Remarks: 
To economise on storage space the way the screen is repre- 
sented in memory takes up varying amounts of store, and the 
location of the screen memory is not fixed: it resides above 
the area where the program is stored. Thus the screen memory 
occupies different locations with different programs, making 
the use of POKE to generate displays far from simple. The 
complete set of quartered pixel characters is available — PLOT 
turns a pixel on and UNPLOT turns one off. 


Tandy TRS-80 and Video Genie 


Type of graphics: 
Monochrome. 
Pixel. 
Resolution: 
128 X 48. 
Screen format: 
16 rows of 64 characters. 
Memory required: 
1K. 
Address range: 
15360 to 16383. 
Commands: 
CLS, SET, RESET, POINT. 
Remarks: 
A 2 X 3 pixel mosaic is used. The screen is cleared with CLS; 
a pixel is turned on with SET, off with RESET and examined 
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with POINT. These facilities are common to Models | and 3, 
but the Model 3 possesses additionally 96 block graphics 
characters. The classification of the Video Genie is identical to 
that of the TRS-80 Model 1. 


Tandy Color Computer 


Type of graphics: 
Colour. 
Line. 

Resolution: 
256 X 192. 

Screen format: 
Columns 0 to 255, rows 0 to 191, cell (0,0) at top left. 

Memory required: 
6K. 

Address range: 
Selectable in 1.5K blocks between 1536 and 13823. 

Commands: 
SCREEN, PMODE, PCLS, PCLEAR, PSET, PRESET, COLOR, 
LINE, CIRCLE, DRAW, PAINT, PUT, GET. 

Remarks: 
Using Extended BASIC, the graphics screen and choice of 
colours are selected with SCREEN, and PMODE sets the resolu- 
tion. Only two colours can be used with the highest resolution 
and four with others: plotting and background colours are 
selected with COLOR. PCLS clears the screen, PSET turns a 
point on and PRESET turns one off. The section of graphics 
memory needed is selected with PCLEAR. When LINE is given 
two points it can draw a line between them, erase a line, draw 
a rectangle having them as opposite corners or fill the rectangle 
with a specified colour. CIRCLE draws a circle, ellipse or any 
part of either. With PAINT regions of the screen can be filled 
with a specified colour. GET and PUT permit mobile graphics 
by handling shapes. 


Texas Instruments T1-99/4A 


Type of graphics: 
Colour. 
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Block. 

Resolution: 
24 X 32. 

Screen format: 
24 rows of 32 characters. 

Commands: 
CLEAR, COLOR, GCHAR, HCHAR, VCHAR, SCREEN. 

Remarks: 
TI BASIC has no PEEK and POKE commands: displays are 
created using PRINT. The graphics commands are provided 
as subroutines; the screen is cleared, for example by CALL 
CLEAR. 32 block graphics characters can be defined by the 
user on an 8 X 8 dot matrix using CHAR. SCREEN sets the 
colour of the screen and COLOR selects foreground and back- 
ground colours for a character. 16 colours are available. With 
HCHAR a character can be displayed and repeated horizontally, 
while VCHAR gives vertical repetition. The screen is examined 
with GCHAR. TI Extended BASIC allows the creation and 
manipulation of ‘sprites’. TI Logo is also available. 
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Graph plotter, 71, 102 

Graphic arts, 1 

Graphic commands 
COLOUR, 72 
DRAW, 5S, 23, 67 


ease of use with, 23 

in turtle graphics, 92 

MOVE, 5, 23, 67 

point, 20, 57 

POKE, 17-8 
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Memory-mapped graphics, 11, 16 
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Perspective, 83, 84, 101 
formulae, 84 

PET, 4,5, 29, 108 

Picture plane, 84 

Pixel, 52 

Pixel characters, 6, 19, 20 
codes for, 19-20 


120 Programming with Graphics 


Pixel graphics, 4, 6, 18-20, 52-66 
Polar coordinates, 79 

curves expressed in, 79-83 
Presentation of information, 95-9 


Resolution, 7-8 
(see also High-resolution 
and Low-resolution) 
improvement of, 34-9, 46-7 


Screen memory, 10, 16, 21 
Screen memory map, 11, 16 
Space Invader, 1, 26, 28 
Space shuttle, 69, 70, 76 
Sprite, 44,99, 118 
Standardisation 

lack of, 8-9, 99, 102 


Tandy TRS-80, 6, 8, 54, 116 
Teletext, 18,99 
Television 
display, 3,9, 10 
monitor, 11 


signal, 10-1 
Three-dimensional drawing, 75, 83-8, 
95-9 
Transformations, 61, 73, 93, 101 
ease in turtle graphics, 93 
magnification, 73 
rotation, 73 
scaling, 61, 76 
shifting, 61, 73 
Turtle, 91 
Turtle graphics, 91-4 
friendliness of, 92 
Two-state device, 13 


Variations on curves: 
design of, 81-3 
Variety, 12 
in displays, 15 
in a byte, 14 
Video RAM, 10 


Wire frame model, 86, 87, 90, 97-8 


Computer graphics is a fascinating field. It has also 
become highly topical, as so many of the new personal 
computers have high-resolution graphics. 


This book provides an up-to-date treatment of the subject, 
covering the three major methods of graphics production. 
After introductory chapters describing the background to 
graphics and the principles of its production, there are 
three chapters devoted to block, pixel and line graphics. 
The final chapter considers topics such as colour, 
movement and three-dimensional drawing, and the 
Appendix summarises the graphics facilities of various 
micros. 


The book is readily understandable by the non- 
mathematical user, and has the great advantage over 
most books on this subject of being machine independent. 
It will therefore be of great interest to all personal 
computer users who use or wish to use graphics, whether 
in the home, in education or in business. 
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